From f17905eeff2f99b09c0afe4d5516cc7114e04278 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 17 Dec 2025 23:13:40 +0900
Subject: [PATCH] feat(archive): enhance archive page with scrollable table and
 responsive design

---
 frontend/src/index.css             |  8 ++++++
 frontend/src/pages/ArchivePage.tsx | 42 ++++++++++++++++--------------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 14c8d5a..2b3fff3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -517,6 +517,13 @@ kbd {
   padding: 10px 12px;
   border-radius: 10px;
 }
+.archive-scroll {
+  width: 100%;
+  overflow: auto;
+}
+.archive-table {
+  min-width: 860px;
+}
 .archive-header {
   font-weight: 800;
   color: var(--subtle);
@@ -537,6 +544,7 @@ kbd {
   }
   .archive-header span:nth-child(3),
   .archive-row span:nth-child(3) { grid-column: span 2; }
+  .archive-table { min-width: 100%; }
 }
 
 .scrape-card {
diff --git a/frontend/src/pages/ArchivePage.tsx b/frontend/src/pages/ArchivePage.tsx
index f960a15..0db2f50 100644
--- a/frontend/src/pages/ArchivePage.tsx
+++ b/frontend/src/pages/ArchivePage.tsx
@@ -74,27 +74,29 @@ export default function ArchivePage() {
             )}
 
             {items.length > 0 && (
-                <div className="archive-table">
-                    <div className="archive-header">
-                        <span>ID</span>
-                        <span>話数</span>
-                        <span>タイトル</span>
-                        <span>開始時刻</span>
-                        <span>再生時間</span>
-                        <span>登録</span>
-                        <span>アーカイブ</span>
-                    </div>
-                    {items.map((it) => (
-                        <div key={it.id} className="archive-row">
-                            <span>#{it.id}</span>
-                            <span>第{it.ep_num}話</span>
-                            <span>{it.ep_title}</span>
-                            <span>{it.start_time.slice(0, 5)}</span>
-                            <span>{it.playback_length.slice(0, 5)}</span>
-                            <span className="subtle">{formatTimestamp(it.date_created)}</span>
-                            <span className="subtle">{formatTimestamp(it.date_archived)}</span>
+                <div className="archive-scroll">
+                    <div className="archive-table">
+                        <div className="archive-header">
+                            <span>ID</span>
+                            <span>話数</span>
+                            <span>タイトル</span>
+                            <span>開始時刻</span>
+                            <span>再生時間</span>
+                            <span>登録</span>
+                            <span>アーカイブ</span>
                         </div>
-                    ))}
+                        {items.map((it) => (
+                            <div key={it.id} className="archive-row">
+                                <span>#{it.id}</span>
+                                <span>第{it.ep_num}話</span>
+                                <span>{it.ep_title}</span>
+                                <span>{it.start_time.slice(0, 5)}</span>
+                                <span>{it.playback_length.slice(0, 5)}</span>
+                                <span className="subtle">{formatTimestamp(it.date_created)}</span>
+                                <span className="subtle">{formatTimestamp(it.date_archived)}</span>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             )}
         </div>