From ca4af24f5f02d1f1f6dabeaa7c1bbb21cc4b5be1 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sun, 21 Jun 2026 20:49:54 +1000
Subject: [PATCH] Update style

---
 package-lock.json            | 35 ++++++++++++--------
 src/App.tsx                  | 28 ++++++++--------
 src/components/LinkTable.tsx | 15 ++++++---
 src/styles.css               | 63 +++++++++++++++++++++++++++++++++---
 4 files changed, 106 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b776c5c..e2801b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -163,8 +163,7 @@
       "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20260619.1.tgz",
       "integrity": "sha512-bprsNzG0DapQPFwU2AvQlQ6FUO7Y4bKWaPBzLNI7nBSqlHsK0P62xx2NaNT6i/htzAgQspKZm1D32y0RxofrRQ==",
       "dev": true,
-      "license": "MIT OR Apache-2.0",
-      "peer": true
+      "license": "MIT OR Apache-2.0"
     },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
@@ -179,6 +178,27 @@
         "node": ">=12"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
@@ -3394,7 +3414,6 @@
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3405,7 +3424,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3846,7 +3864,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "typescript": "^5 || ^6"
       },
@@ -4241,7 +4258,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4359,7 +4375,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
       "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4369,7 +4384,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
       "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4697,7 +4711,6 @@
       "integrity": "sha512-X8EX+XV4QR5xCsrgxaED954zTDfY8KqlDtskKEL0cHhyS/P8b4IFOvGDQpsC9Q1XnLq915wEfwwY/zzskCtmhg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.28.0"
       },
@@ -4717,7 +4730,6 @@
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4742,7 +4754,6 @@
       "integrity": "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pathe": "^2.0.3"
       }
@@ -4804,7 +4815,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
       "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -5000,7 +5010,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "workerd": "bin/workerd"
       },
diff --git a/src/App.tsx b/src/App.tsx
index 8b5336a..c0c4a7d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -92,19 +92,21 @@ export default function App() {
     <div className="app-shell">
       <header className="app-bar">
         <a className="brand" href="#/" onClick={() => navigate('home')}>{t('app.brand')}</a>
-        <nav className="tabs" aria-label="Primary">
-          {user && navTabs.map((entry) => (
-            <a
-              key={entry.id}
-              href={`#/${entry.id}`}
-              className={`tab${route === entry.id ? ' is-active' : ''}`}
-              aria-current={route === entry.id ? 'page' : undefined}
-              onClick={() => navigate(entry.id)}
-            >
-              {t(entry.label)}
-            </a>
-          ))}
-        </nav>
+        {user ? (
+          <nav className="tabs" aria-label="Primary">
+            {navTabs.map((entry) => (
+              <a
+                key={entry.id}
+                href={`#/${entry.id}`}
+                className={`tab${route === entry.id ? ' is-active' : ''}`}
+                aria-current={route === entry.id ? 'page' : undefined}
+                onClick={() => navigate(entry.id)}
+              >
+                {t(entry.label)}
+              </a>
+            ))}
+          </nav>
+        ) : null}
         <div className="app-bar-right">
           <button
             type="button"
diff --git a/src/components/LinkTable.tsx b/src/components/LinkTable.tsx
index 6dc82a8..3b03284 100644
--- a/src/components/LinkTable.tsx
+++ b/src/components/LinkTable.tsx
@@ -173,14 +173,14 @@ export default function LinkTable({
   }
 
   return (
-    <div>
+    <div className="link-collection">
       {/* Toolbar */}
       <div className="link-table-toolbar">
         <span className="muted" style={{ fontSize: '0.8125rem' }}>
           {t('linkTable.linksCount', { count: links.length })}
           {visibleCount < links.length ? t('linkTable.showing', { count: visibleCount }) : ''}
         </span>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
+        <div className="link-table-controls">
           {viewStyle === 'cards' && (
             <>
               <label style={{ fontSize: '0.8rem', color: 'var(--muted)', fontWeight: 500, whiteSpace: 'nowrap' }}>{t('linkTable.sort')}</label>
@@ -240,7 +240,12 @@ export default function LinkTable({
                 </th>
               ) : null}
               {(['alias', 'linkType', 'targetUrl', 'clickCount', 'updatedAt'] as SortField[]).map((field) => (
-                <th key={field} scope="col" className="sortable-th" onClick={() => handleSort(field)}>
+                <th
+                  key={field}
+                  scope="col"
+                  className={`sortable-th col-${field === 'linkType' ? 'type' : field === 'targetUrl' ? 'target' : field === 'clickCount' ? 'clicks' : field === 'updatedAt' ? 'updated' : 'alias'}`}
+                  onClick={() => handleSort(field)}
+                >
                   {columnHeader(field)}
                   <SortIndicator field={field} sortField={sortField} sortDir={sortDir} />
                 </th>
@@ -287,7 +292,7 @@ export default function LinkTable({
                     </a>
                     {link.description ? <small className="row-description">{link.description}</small> : null}
                   </td>
-                  <td><LinkTypeBadge linkType={link.linkType} /></td>
+                  <td className="col-type"><LinkTypeBadge linkType={link.linkType} /></td>
                   <td className="col-target">
                     {link.linkType === 'redirect' ? (
                       link.targetUrl ? (
@@ -439,4 +444,4 @@ export default function LinkTable({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/styles.css b/src/styles.css
index cb77aba..9dadead 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -818,6 +818,11 @@ button.link-action--confirm:hover { background: var(--accent-soft); }
 }
 
 /* Toolbar above table/cards */
+.link-collection {
+  container-type: inline-size;
+  min-width: 0;
+}
+
 .link-table-toolbar {
   display: flex;
   align-items: center;
@@ -827,6 +832,15 @@ button.link-action--confirm:hover { background: var(--accent-soft); }
   gap: 0.5rem;
 }
 
+.link-table-controls {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
 /* Sortable column headers */
 .sortable-th {
   cursor: pointer;
@@ -962,12 +976,9 @@ button.link-action--confirm:hover { background: var(--accent-soft); }
 
 .link-cards-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
   gap: 0.75rem;
 }
-@media (max-width: 1200px) { .link-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
-@media (max-width: 800px)  { .link-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 480px)  { .link-cards-grid { grid-template-columns: 1fr; } }
 
 .link-card {
   background: var(--surface);
@@ -1000,6 +1011,50 @@ button.link-action--confirm:hover { background: var(--accent-soft); }
   min-width: 0;
 }
 
+.link-card-header .alias-pill {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@container (max-width: 680px) {
+  .link-table .col-target,
+  .link-table .col-updated {
+    display: none;
+  }
+
+  .link-table {
+    table-layout: fixed;
+  }
+
+  .link-table .col-alias {
+    width: 48%;
+  }
+
+  .link-table .col-type {
+    width: 34%;
+  }
+
+  .link-table .col-clicks {
+    text-align: right;
+    width: 18%;
+  }
+}
+
+@container (max-width: 430px) {
+  .link-table .col-type {
+    display: none;
+  }
+
+  .link-table .col-alias {
+    width: 76%;
+  }
+
+  .link-table .col-clicks {
+    width: 24%;
+  }
+}
+
 .link-card-type-badge {
   font-size: 0.7rem;
   letter-spacing: 0.04em;