From faa75d35284db9aff1cf3a138c3b98c3eefd56cc Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Fri, 29 May 2026 16:59:18 +0200
Subject: [PATCH] tweaked layout of the like stats page

---
 src/components/LikeStatsTable.svelte | 12 +++++++-----
 src/pages/LikeStatsPage.svelte       | 22 ++++++++++++++++++----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/LikeStatsTable.svelte b/src/components/LikeStatsTable.svelte
index a339a59..7924fd2 100644
--- a/src/components/LikeStatsTable.svelte
+++ b/src/components/LikeStatsTable.svelte
@@ -4,7 +4,7 @@
   let { cssClass, header, users }: { cssClass: string, header: string, users: LikeStat[] } = $props();
 </script>
 
-<table class="scan-result {cssClass}" style="display: table;">
+<table class="scan-result {cssClass}">
   <thead>
     <tr><th colspan="3">{header}</th></tr>
   </thead>
@@ -25,10 +25,10 @@
   .scan-result {
     border: 1px solid #333;
     border-collapse: collapse;
-    display: none;
-    float: left;
+    margin: 20px auto 40px;
+    width: 100%;
     margin-top: 20px;
-    margin-bottom: 40px;
+    margin-bottom: 20px;
   }
 
   td, th {
@@ -48,7 +48,9 @@
   }
 
   td.handle {
-    width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   td.count {
diff --git a/src/pages/LikeStatsPage.svelte b/src/pages/LikeStatsPage.svelte
index 490e7cc..f9b15ac 100644
--- a/src/pages/LikeStatsPage.svelte
+++ b/src/pages/LikeStatsPage.svelte
@@ -55,8 +55,14 @@
 </form>
 
 {#if givenLikesUsers && receivedLikesUsers}
-  <LikeStatsTable cssClass="given-likes" header="❤️ Likes from you:" users={givenLikesUsers} />
-  <LikeStatsTable cssClass="received-likes" header="💛 Likes on your posts:" users={receivedLikesUsers} />
+  <div class="like-stats-results">
+    <div class="table-pane">
+      <LikeStatsTable cssClass="given-likes" header="❤️ Likes from you:" users={givenLikesUsers} />
+    </div>
+    <div class="table-pane">
+      <LikeStatsTable cssClass="received-likes" header="💛 Likes on your posts:" users={receivedLikesUsers} />
+    </div>
+  </div>
 {/if}
 </main>
 
@@ -79,7 +85,15 @@
     display: none;
   }
 
-  :global(.scan-result.given-likes) {
-    margin-right: 100px;
+  .like-stats-results {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 100px;
+    width: 100%;
+  }
+
+  .table-pane {
+    min-width: 0;
+    overflow-x: auto;
   }
 </style>
-- 
2.51.2