From 141aac0e7484d7964c19c5734fa5471676cd4a33 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:01:51 +0300
Subject: [PATCH 01/12] Update ChannelPopup.svelte

---
 src/components/ChannelPopup.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ChannelPopup.svelte b/src/components/ChannelPopup.svelte
index 218b8741b..f6263590c 100644
--- a/src/components/ChannelPopup.svelte
+++ b/src/components/ChannelPopup.svelte
@@ -19,12 +19,12 @@
 </script>
 
 <div
-  class="relative px-2 py-24 flex justify-center"
+  class="relative px-2 pt-20 pb-24 flex justify-center"
   role="presentation"
   on:keypress
   on:click|self={close}
 >
-  <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
+  <div class="relative bg-white rounded-lg shadow dark:bg-gray-800 w-full max-w-[820px]">
     <div
       class="flex justify-between items-center py-3 pl-5 pr-3 md:pr-4 rounded-t border-b dark:border-gray-700"
     >
@@ -48,8 +48,8 @@
         <CloseButton on:click={close} />
       </div>
     </div>
-    <div class="overflow-y-auto overflow-x-scroll w-full scrollbar-hide">
-      <div class="inline-table p-12 pt-10">
+    <div class="overflow-y-auto overflow-x-scroll max-w-full scrollbar-hide">
+      <div class="inline-table px-5 py-5 sm:py-10 sm:px-12">
         <HTMLPreview data={channel} {close} />
       </div>
     </div>

From 6c1ff2b9b369479988c9f48fe6d80a944a7d611e Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:01:55 +0300
Subject: [PATCH 02/12] Update HTMLPreview.svelte

---
 src/components/HTMLPreview.svelte | 39 +++++++++++--------------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/components/HTMLPreview.svelte b/src/components/HTMLPreview.svelte
index f22ffccba..9cbaf9171 100644
--- a/src/components/HTMLPreview.svelte
+++ b/src/components/HTMLPreview.svelte
@@ -86,17 +86,17 @@
   }
 </script>
 
-<table class="table-fixed">
+<table class="table-fixed w-full">
   <tbody>
     {#each fieldset as field}
-      <tr>
-        <td class="align-top w-[11rem]">
-          <div class="flex pr-4 pb-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+      <tr class="overflow-hidden">
+        <td class="align-top w-[140px] sm:w-[180px]">
+          <div class="flex pr-5 pb-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
             {field.name}
           </div>
         </td>
-        <td class="align-top">
-          <div class="flex pb-3 text-sm text-gray-800 dark:text-gray-100 flex-wrap">
+        <td class="align-top w-full overflow-hidden">
+          <div class="flex pb-3 text-sm text-gray-800 dark:text-gray-100">
             {#if field.type === 'image'}
               <img
                 src={field.value}
@@ -110,6 +110,7 @@
                 href="/?q={field.value.query}"
                 on:click={() => close()}
                 class="underline hover:text-blue-500"
+                title={field.value.label}
               >
                 {field.value.label}
               </a>
@@ -121,6 +122,7 @@
                   href="/?q={value.query}"
                   on:click={() => close()}
                   class="underline hover:text-blue-500"
+                  title={value.label}
                 >
                   {value.label}
                 </a>
@@ -128,30 +130,15 @@
             {:else if field.type === 'external_link'}
               <a
                 href={field.value}
-                class="underline hover:text-blue-500 inline-flex align-middle whitespace-nowrap"
+                class="underline hover:text-blue-500 truncate"
                 target="_blank"
                 rel="noopener noreferrer"
-                >{field.value}<span
-                  class="inline-flex items-center pl-1 text-sm font-semibold text-gray-400 rounded-full"
-                >
-                  <svg
-                    class="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                    />
-                  </svg>
-                </span></a
+                title={field.value}>{field.value}</a
               >
+            {:else if field.name === 'id'}
+              <span class="truncate" title={field.value}>{field.value}</span>
             {:else}
-              {field.value}
+              <span title={field.value}>{field.value}</span>
             {/if}
           </div>
         </td>

From 27d53aa0863c1cce92b77b0576fd05f3140046c3 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:06:18 +0300
Subject: [PATCH 03/12] Update ChannelItem.svelte

---
 src/components/ChannelItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 6e56a23b8..85d785326 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -94,7 +94,7 @@
       {/if}
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-80 shrink-0">
+  <div class="w-[216px] px-2 sm:w-80 shrink-0">
     <div>
       <div class="text-left">
         <div class="flex space-x-2 items-center">

From c72b227c03ea35815ba7e1770256b1a773592164 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:17:02 +0300
Subject: [PATCH 04/12] Update SearchSyntaxPopup.svelte

---
 src/components/SearchSyntaxPopup.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/SearchSyntaxPopup.svelte b/src/components/SearchSyntaxPopup.svelte
index 61cce7bf5..e33de7e6a 100644
--- a/src/components/SearchSyntaxPopup.svelte
+++ b/src/components/SearchSyntaxPopup.svelte
@@ -62,9 +62,9 @@
       </h3>
       <CloseButton on:click={close} />
     </div>
-    <div class="overflow-y-auto overflow-x-hidden w-full">
-      <div class="p-6 text-gray-800 dark:text-white">
-        <table class="w-full">
+    <div class="overflow-y-auto overflow-x-scroll w-full scrollbar-hide">
+      <div class="text-gray-800 dark:text-white p-6 inline-block">
+        <table>
           <thead>
             <tr>
               <th class="border p-2 dark:border-gray-700 font-semibold">Query</th>
@@ -74,13 +74,14 @@
           <tbody class="text-left">
             {#each examples as example}
               <tr class="even:bg-gray-50 even:dark:bg-gray-700">
-                <td class="border dark:border-gray-700 px-3 py-3 whitespace-nowrap">
+                <td class="border dark:border-gray-700 px-3 py-3 whitespace-nowrap min-w-[220px]">
                   <code
                     class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
                     >{example.query}</code
                   >
                 </td>
-                <td class="border dark:border-gray-700 px-4 py-3">{example.result}</td>
+                <td class="border dark:border-gray-700 px-4 py-3 min-w-[260px]">{example.result}</td
+                >
               </tr>
             {/each}
           </tbody>

From a7e39bd260c21ee6bfe1e889ede567768a385d78 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:19:59 +0300
Subject: [PATCH 05/12] Update StreamItem.svelte

---
 src/components/StreamItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StreamItem.svelte b/src/components/StreamItem.svelte
index a1e2296c4..a1e5f5a72 100644
--- a/src/components/StreamItem.svelte
+++ b/src/components/StreamItem.svelte
@@ -18,7 +18,7 @@
     <div class="flex space-x-3 items-center max-w-[90%] w-full">
       <ExpandButton on:click={event => (expanded = event.detail.state)} />
       <a
-        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
+        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[80%] w-full"
         href={stream.url}
         title={stream.url}
         target="_blank"

From 76f00f8947e2e0d52469889a5a8cbb6ab18dcfeb Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 03:51:21 +0300
Subject: [PATCH 06/12] Update ChannelGrid.svelte

---
 src/components/ChannelGrid.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 88e3b72a4..2fbe238c9 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -2,11 +2,19 @@
   import ChannelItem from './ChannelItem.svelte'
 
   export let channels = []
+
+  let limit = 100
+
+  $: channelsDisplay = channels.slice(0, limit)
+
+  function showMore() {
+    limit += 100
+  }
 </script>
 
 <div class="flex flex-col">
   <div class="overflow-y-auto scrollbar-hide">
-    <div class="inline-block min-w-full align-middle overflow-hidden">
+    <div class="inline-block min-w-full align-middle">
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <div class="bg-gray-50 dark:bg-gray-700">
           <div class="flex">
@@ -27,9 +35,15 @@
           </div>
         </div>
         <div class="bg-white dark:bg-gray-800">
-          {#each channels as channel (channel.id)}
+          {#each channelsDisplay as channel (channel.id)}
             <ChannelItem bind:channel />
           {/each}
+          {#if channelsDisplay.length < channels.length}
+            <button
+              class="flex items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
+              on:click={showMore}>Show More</button
+            >
+          {/if}
         </div>
       </div>
     </div>

From 59a1b6ff75bd87aa90696a1a98b29ee8c49eedb6 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 04:59:14 +0300
Subject: [PATCH 07/12] Update ChannelGrid.svelte

---
 src/components/ChannelGrid.svelte | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 2fbe238c9..2f40be244 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -12,7 +12,7 @@
   }
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col bg-white dark:bg-gray-800">
   <div class="overflow-y-auto scrollbar-hide">
     <div class="inline-block min-w-full align-middle">
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
@@ -34,18 +34,18 @@
             </div>
           </div>
         </div>
-        <div class="bg-white dark:bg-gray-800">
+        <div>
           {#each channelsDisplay as channel (channel.id)}
             <ChannelItem bind:channel />
           {/each}
-          {#if channelsDisplay.length < channels.length}
-            <button
-              class="flex items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
-              on:click={showMore}>Show More</button
-            >
-          {/if}
         </div>
       </div>
     </div>
   </div>
+  {#if channelsDisplay.length < channels.length}
+    <button
+      class="flex border-t border-gray-200 dark:border-gray-700 items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
+      on:click={showMore}>Show More</button
+    >
+  {/if}
 </div>

From 4964da1eac83b9d8e11a2b4c7c33b3b7c371e10a Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 05:14:08 +0300
Subject: [PATCH 08/12] Update ChannelItem.svelte

---
 src/components/ChannelItem.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 85d785326..21b229706 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -81,7 +81,7 @@
 <div
   class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative"
 >
-  <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center">
+  <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-[200px] flex shrink-0 items-center justify-center">
     <div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden">
       {#if channel.logo}
         <img
@@ -127,7 +127,7 @@
       </div>
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-80">
+  <div class="w-52 px-2 sm:w-[280px]">
     <div>
       <code
         class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
@@ -135,7 +135,7 @@
       >
     </div>
   </div>
-  <div class="w-40 px-6 sm:w-[150px]">
+  <div class="w-56 pr-5 sm:w-[206px]">
     <div class="text-right flex justify-end space-x-3 items-center">
       {#if guides.length}
         <button

From f41d7c0d5aa64deaafdd863d9a8571acbb9b590a Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 05:15:17 +0300
Subject: [PATCH 09/12] Update ChannelItem.svelte

---
 src/components/ChannelItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 21b229706..4a07ef7c1 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -102,7 +102,7 @@
             on:click|preventDefault={showChannelData}
             href="/channels/{country}/{name}"
             tabindex="0"
-            class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
+            class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 truncate whitespace-nowrap"
             title={channel.displayName}
           >
             {channel.displayName}

From 68be334d90dbea0e90c3a0c4075924984f58321b Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 05:21:25 +0300
Subject: [PATCH 10/12] Update ChannelItem.svelte

---
 src/components/ChannelItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 4a07ef7c1..1f24cc56a 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -6,7 +6,7 @@
   import Checkbox from './Checkbox.svelte'
   import BlockedBadge from './BlockedBadge.svelte'
   import ClosedBadge from './ClosedBadge.svelte'
-  import { downloadMode, selected, query } from '~/store'
+  import { downloadMode, selected } from '~/store'
   import { fade } from 'svelte/transition'
 
   export let channel

From a60dfdbe1cc9fce05a4f549a11467928e11e4382 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 05:53:29 +0300
Subject: [PATCH 11/12] Update ChannelGrid.svelte

---
 src/components/ChannelGrid.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 2f40be244..5670d2834 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -18,14 +18,14 @@
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <div class="bg-gray-50 dark:bg-gray-700">
           <div class="flex">
-            <div class="w-36 sm:w-52 shrink-0"></div>
+            <div class="w-36 sm:w-[200px] shrink-0"></div>
             <div
-              class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-52 sm:w-80 shrink-0"
+              class="w-[216px] sm:w-80 py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 shrink-0"
             >
               Name
             </div>
             <div
-              class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-48 sm:w-80"
+              class="w-52 sm:w-[280px] py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400"
             >
               ID
             </div>

From 3fd77cd01ecee56bcf8c1ee0c82cabf5ae0aa9c2 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 10 Feb 2025 05:53:32 +0300
Subject: [PATCH 12/12] Update ChannelItem.svelte

---
 src/components/ChannelItem.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 1f24cc56a..dd7efe823 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -94,7 +94,7 @@
       {/if}
     </div>
   </div>
-  <div class="w-[216px] px-2 sm:w-80 shrink-0">
+  <div class="w-[216px] sm:w-80 px-2 shrink-0">
     <div>
       <div class="text-left">
         <div class="flex space-x-2 items-center">
@@ -127,7 +127,7 @@
       </div>
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-[280px]">
+  <div class="w-52 sm:w-[280px] px-2">
     <div>
       <code
         class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"