From 3b7ed3ef40302c1c48aac9b35543cf0ec579fb9f Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Tue, 10 Oct 2023 12:45:15 +0300
Subject: [PATCH] Fixes scroll issues

---
 package-lock.json                  | 11 +++++++++++
 package.json                       |  1 +
 src/components/ChannelGrid.svelte  |  2 +-
 src/components/ChannelPopup.svelte |  4 ++--
 src/components/HTMLPreview.svelte  |  8 ++++----
 tailwind.config.cjs                |  2 +-
 yarn.lock                          |  5 +++++
 7 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7efc0fbeb..fc1dcdd73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "iptv-org.github.io",
       "hasInstallScript": true,
       "dependencies": {
+        "tailwind-scrollbar-hide": "^1.1.7",
         "validator": "^13.11.0"
       },
       "devDependencies": {
@@ -2258,6 +2259,11 @@
         "node": ">= 14.17.0"
       }
     },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz",
+      "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
@@ -3933,6 +3939,11 @@
         "xmlbuilder2": "^3.0.2"
       }
     },
+    "tailwind-scrollbar-hide": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz",
+      "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA=="
+    },
     "tailwindcss": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
diff --git a/package.json b/package.json
index 34e48cd86..9bfb3ecc7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   },
   "type": "module",
   "dependencies": {
+    "tailwind-scrollbar-hide": "^1.1.7",
     "validator": "^13.11.0"
   }
 }
diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 2aa843639..55d3e4893 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div class="flex flex-col">
-  <div class="overflow-y-auto">
+  <div class="overflow-y-auto scrollbar-hide">
     <div class="inline-block min-w-full align-middle overflow-hidden">
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <div class="bg-gray-50 dark:bg-gray-700">
diff --git a/src/components/ChannelPopup.svelte b/src/components/ChannelPopup.svelte
index edf2525b0..95efe163a 100644
--- a/src/components/ChannelPopup.svelte
+++ b/src/components/ChannelPopup.svelte
@@ -31,8 +31,8 @@
         <CloseButton on:click={close} />
       </div>
     </div>
-    <div class="overflow-y-auto overflow-x-hidden w-full">
-      <div class="p-12 pt-10">
+    <div class="overflow-y-auto overflow-x-scroll w-full scrollbar-hide">
+      <div class="inline-table p-12 pt-10">
         <HTMLPreview data={channel} {close} />
       </div>
     </div>
diff --git a/src/components/HTMLPreview.svelte b/src/components/HTMLPreview.svelte
index 7683a5eee..99f8a764e 100644
--- a/src/components/HTMLPreview.svelte
+++ b/src/components/HTMLPreview.svelte
@@ -84,17 +84,17 @@
   }
 </script>
 
-<table class="table-fixed w-full">
+<table class="table-fixed">
   <tbody>
     {#each fieldset as field}
       <tr>
         <td class="align-top w-[11rem]">
-          <div class="flex pr-4 py-1 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+          <div class="flex pr-4 pb-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
             {field.name}
           </div>
         </td>
         <td class="align-top">
-          <div class="flex py-1 text-sm text-gray-800 dark:text-gray-100 flex-wrap">
+          <div class="flex pb-3 text-sm text-gray-800 dark:text-gray-100 flex-wrap">
             {#if field.type === 'image'}
               <img
                 src={field.value}
@@ -125,7 +125,7 @@
             {:else if field.type === 'external_link'}
               <a
                 href={field.value}
-                class="underline hover:text-blue-500 inline-flex align-middle"
+                class="underline hover:text-blue-500 inline-flex align-middle whitespace-nowrap"
                 target="_blank"
                 rel="noopener noreferrer"
                 >{field.value}<span
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f753fbe6f..45905e61b 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -19,5 +19,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require('@tailwindcss/line-clamp')]
+  plugins: [require('@tailwindcss/line-clamp'), require('tailwind-scrollbar-hide')]
 }
diff --git a/yarn.lock b/yarn.lock
index c1873a5f2..c92a020b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -892,6 +892,11 @@ svelte-sitemap@^2.6.0:
   resolved "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz"
   integrity sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==
 
+tailwind-scrollbar-hide@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz"
+  integrity sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==
+
 tailwindcss@^3.2.7, "tailwindcss@>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1":
   version "3.2.7"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz"