From 3418cd503afb1e101ce7ba1124133f3fc02f7f4c Mon Sep 17 00:00:00 2001
From: Arhey <github@oiya.xyz>
Date: Tue, 7 Mar 2023 03:06:43 +0300
Subject: [PATCH] Update ChannelGrid.svelte

---
 src/components/ChannelGrid.svelte | 68 ++++++++++++++-----------------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 37cd15082..89d3aded5 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -1,43 +1,37 @@
 <script>
-	import ChannelItem from './ChannelItem.svelte'
+  import ChannelItem from './ChannelItem.svelte'
 
-	export let channels = []
+  export let channels = []
 </script>
 
 <div class="flex flex-col">
-	<div class="overflow-x-auto">
-		<div class="inline-block min-w-full align-middle">
-			<div class="overflow-hidden">
-				<table
-					class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 table-fixed md:w-[62rem]"
-				>
-					<thead class="bg-gray-50 dark:bg-gray-700">
-						<tr>
-							<th scope="col" class="min-w-[10rem] md:w-[13rem] relative"></th>
-							<th
-								scope="col"
-								class="py-3 px-3 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 min-w-[14rem] md:w-[19rem]"
-							>
-								Name
-							</th>
-							<th
-								scope="col"
-								class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 min-w-[12rem] md:w-[16rem]"
-							>
-								TVG-ID
-							</th>
-							<th scope="col" class="relative min-w-[11rem]">
-								<span class="sr-only">Actions</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody class="bg-white dark:bg-gray-800">
-						{#each channels as channel (channel.id)}
-						<ChannelItem bind:channel="{channel}" />
-						{/each}
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
+  <div class="overflow-y-auto">
+    <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">
+          <div class="flex">
+            <div class="w-36 sm:w-52 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-72 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"
+            >
+              TVG-ID
+            </div>
+            <div>
+              <span class="sr-only">Actions</span>
+            </div>
+          </div>
+        </div>
+        <div class="bg-white dark:bg-gray-800">
+          {#each channels as channel (channel.id)}
+          <ChannelItem bind:channel="{channel}" />
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
 </div>