From 6e3dcc009830dd696e348f0ac8bc565bae6b19c9 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Fri, 3 Jan 2025 23:02:31 +0100
Subject: [PATCH] style: make table overflow:scroll

---
 src/pages/tech-bsky-fedi.astro | 56 +++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/pages/tech-bsky-fedi.astro b/src/pages/tech-bsky-fedi.astro
index 1a89af9..487c3e9 100644
--- a/src/pages/tech-bsky-fedi.astro
+++ b/src/pages/tech-bsky-fedi.astro
@@ -73,31 +73,33 @@ const description =
 
     <h2>Accounts ({accountObjects.length})</h2>
 
-    <table>
-      <tr>
-        <th>Avatar</th>
-        <th>Bsky</th>
-        <th>Fedi</th>
-      </tr>
-      {
-        accountObjects.map((account, index) => (
-          <tr>
-            <td>
-              <img
-                src={data[index].avatar}
-                alt={`${account.bskyHandle}'s avatar`}
-              />
-            </td>
-            <td>
-              <span>{account.bskyHandle}</span>
-            </td>
-            <td>
-              <span>{account.fediHandle}</span>
-            </td>
-          </tr>
-        ))
-      }
-    </table>
+    <div class="table-container">
+      <table>
+        <tr>
+          <th>Avatar</th>
+          <th>Bsky</th>
+          <th>Fedi</th>
+        </tr>
+        {
+          accountObjects.map((account, index) => (
+            <tr>
+              <td>
+                <img
+                  src={data[index].avatar}
+                  alt={`${account.bskyHandle}'s avatar`}
+                />
+              </td>
+              <td>
+                <span>{account.bskyHandle}</span>
+              </td>
+              <td>
+                <span>{account.fediHandle}</span>
+              </td>
+            </tr>
+          ))
+        }
+      </table>
+    </div>
 
     <h2 id="how">How how how?</h2>
 
@@ -129,6 +131,10 @@ const description =
   td span {
     font-size: small;
   }
+
+  .table-container {
+    overflow: scroll;
+  }
   table th,
   table td {
     padding: 0.5em;