From 594cb3c4c4b2df104ff8f8b14c6cd481724d28a5 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Wed, 29 Apr 2026 22:00:46 +0800
Subject: [PATCH] feat: make UnitsDB interface responsive with mobile-first CSS

- UnitsDBBrowser: mobile-first layout with scrollable table wrappers,
  stats bar, and search box; desktop styles at 768px breakpoint
- UnitsDBEntityDetail: single-column layout on mobile, 2-column at
  900px; properties grid 1-col mobile, 2-col at 640px; scrollable
  breadcrumb on mobile
- custom.css: move overflow-x hidden from html to body to fix sticky
  navbar scrolling away on mobile
---
 .../theme/components/UnitsDBBrowser.vue       | 114 +++++++++++-------
 .../theme/components/UnitsDBEntityDetail.vue  |  57 +++++----
 .vitepress/theme/custom.css                   |   3 +
 3 files changed, 110 insertions(+), 64 deletions(-)

diff --git a/.vitepress/theme/components/UnitsDBBrowser.vue b/.vitepress/theme/components/UnitsDBBrowser.vue
index 84af6d2..a93c584 100644
--- a/.vitepress/theme/components/UnitsDBBrowser.vue
+++ b/.vitepress/theme/components/UnitsDBBrowser.vue
@@ -274,7 +274,8 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Units ── -->
-      <table v-else-if="activeTab === 'units'" class="dtbl">
+      <div v-else-if="activeTab === 'units'" class="dtbl-wrap">
+      <table class="dtbl">
         <thead><tr><th class="c-sym">Symbol</th><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-dim">Dimension</th><th class="c-tag">Type</th><th class="c-qty">Quantity</th></tr></thead>
         <tbody>
           <tr v-for="item in filtered" :key="item.id" @click="rowClick($event, 'units', item.unitsml_id)">
@@ -287,9 +288,11 @@ onUnmounted(() => {
           </tr>
         </tbody>
       </table>
+      </div>
 
       <!-- ── Quantities ── -->
-      <table v-else-if="activeTab === 'quantities'" class="dtbl">
+      <div v-else-if="activeTab === 'quantities'" class="dtbl-wrap">
+      <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-tag">Type</th><th class="c-dim">Dimension</th><th class="c-cnt">Units</th></tr></thead>
         <tbody>
           <tr v-for="item in filtered" :key="item.id" @click="rowClick($event, 'quantities', item.unitsml_id)">
@@ -301,9 +304,11 @@ onUnmounted(() => {
           </tr>
         </tbody>
       </table>
+      </div>
 
       <!-- ── Dimensions ── -->
-      <table v-else-if="activeTab === 'dimensions'" class="dtbl">
+      <div v-else-if="activeTab === 'dimensions'" class="dtbl-wrap">
+      <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-dim">Expression</th><th class="c-cnt">Quantities</th><th class="c-tag">Dim-less</th></tr></thead>
         <tbody>
           <tr v-for="item in filtered" :key="item.id" @click="rowClick($event, 'dimensions', item.unitsml_id)">
@@ -315,9 +320,11 @@ onUnmounted(() => {
           </tr>
         </tbody>
       </table>
+      </div>
 
       <!-- ── Prefixes ── -->
-      <table v-else-if="activeTab === 'prefixes'" class="dtbl">
+      <div v-else-if="activeTab === 'prefixes'" class="dtbl-wrap">
+      <table class="dtbl">
         <thead><tr><th class="c-sym">Symbol</th><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-fact">Factor</th><th class="c-cnt">Value</th></tr></thead>
         <tbody>
           <tr v-for="item in filtered" :key="item.id" @click="rowClick($event, 'prefixes', item.unitsml_id)">
@@ -329,9 +336,11 @@ onUnmounted(() => {
           </tr>
         </tbody>
       </table>
+      </div>
 
       <!-- ── Scales ── -->
-      <table v-else-if="activeTab === 'scales'" class="dtbl">
+      <div v-else-if="activeTab === 'scales'" class="dtbl-wrap">
+      <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-props">Properties</th></tr></thead>
         <tbody>
           <tr v-for="item in filtered" :key="item.id" @click="rowClick($event, 'scales', item.unitsml_id)">
@@ -341,9 +350,11 @@ onUnmounted(() => {
           </tr>
         </tbody>
       </table>
+      </div>
 
       <!-- ── Systems ── -->
-      <table v-else-if="activeTab === 'unit_systems'" class="dtbl">
+      <div v-else-if="activeTab === 'unit_systems'" class="dtbl-wrap">
+      <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-sym">Short</th><th class="c-cnt">Units</th><th class="c-tag">Acceptable</th></tr></thead>
         <tbody>
           <tr v-for="item in filtered" :key="item.id" @click="rowClick($event, 'unit_systems', item.unitsml_id)">
@@ -355,6 +366,7 @@ onUnmounted(() => {
           </tr>
         </tbody>
       </table>
+      </div>
 
     </div>
   </div>
@@ -363,24 +375,26 @@ onUnmounted(() => {
 <style scoped>
 .udb { font-size: 0.875rem; }
 
+/* ── Layout (mobile-first) ── */
+
 .udb-content {
   max-width: 1440px;
   margin: 0 auto;
-  padding: 1.25rem 1.5rem 2rem;
+  padding: 0.75rem 0.75rem 2rem;
 }
 
 .udb-header {
   background: var(--vp-c-bg-soft);
   border-bottom: 1px solid var(--vp-c-divider);
-  padding: 1.25rem 1.5rem;
+  padding: 0.75rem;
 }
 .udb-header-inner {
   max-width: 1440px; margin: 0 auto;
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 1rem; flex-wrap: wrap;
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 0.75rem; flex-wrap: wrap;
 }
-.udb-title { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-.udb-subtitle { font-size: 0.875rem; color: var(--vp-c-text-3); margin: 0.25rem 0 0; }
+.udb-title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
+.udb-subtitle { font-size: 0.8125rem; color: var(--vp-c-text-3); margin: 0.25rem 0 0; }
 .udb-action-btn {
   display: inline-flex; align-items: center; gap: 0.4rem;
   padding: 0.4rem 0.875rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 500;
@@ -389,34 +403,39 @@ onUnmounted(() => {
 }
 .udb-action-btn:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
 
-/* Stats bar */
+/* ── Stats bar ── */
+
 .stats-bar {
-  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
-  padding: 0.5rem 0.875rem; background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider); border-radius: 10px; margin-bottom: 1rem;
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.5rem 0.75rem; background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider); border-radius: 10px; margin-bottom: 0.75rem;
+  overflow-x: auto; -webkit-overflow-scrolling: touch;
 }
-.stat-group { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+.stat-group { display: flex; gap: 0.25rem; flex-shrink: 0; }
 .stat-pill {
   display: flex; align-items: baseline; gap: 0.3rem;
   padding: 0.2rem 0.625rem; border-radius: 20px; cursor: pointer;
   border: 1px solid transparent; background: none; font-family: inherit;
   font-size: 0.75rem; color: var(--vp-c-text-3); transition: all 0.2s;
+  white-space: nowrap;
 }
 .stat-pill:hover { background: var(--vp-c-bg); border-color: var(--vp-c-divider); color: var(--vp-c-text-2); }
 .stat-pill.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
 .sp-val { font-weight: 700; font-size: 0.875rem; }
 .sp-lbl { font-size: 0.6875rem; }
-.stat-divider { width: 1px; height: 1.5rem; background: var(--vp-c-divider); flex-shrink: 0; }
-.stat-dl-group { display: flex; gap: 0.3rem; margin-left: auto; flex-wrap: wrap; }
+.stat-divider { display: none; width: 1px; height: 1.5rem; background: var(--vp-c-divider); flex-shrink: 0; }
+.stat-dl-group { display: flex; gap: 0.3rem; flex-shrink: 0; }
 .dl-btn {
   display: inline-flex; align-items: center; gap: 0.3rem;
   padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.6875rem; font-weight: 500;
   cursor: pointer; transition: all 0.2s; border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg); color: var(--vp-c-text-2); font-family: inherit; text-decoration: none;
+  white-space: nowrap;
 }
 .dl-btn:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
 
-/* Sub-filters */
+/* ── Sub-filters ── */
+
 .sub-filters { display: flex; gap: 0.25rem; margin-bottom: 0.625rem; flex-wrap: wrap; }
 .sub-filter-btn {
   display: flex; align-items: center; gap: 0.3rem;
@@ -429,24 +448,33 @@ onUnmounted(() => {
 .sub-filter-btn.active { background: rgba(45,44,105,0.08); border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
 .sf-count { font-weight: 600; }
 
-/* Search */
-.search-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
-.search-box { flex: 1; position: relative; max-width: 400px; }
+/* ── Search ── */
+
+.search-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
+.search-box { flex: 1; position: relative; min-width: 0; }
 .si { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--vp-c-text-3); pointer-events: none; }
 .si-input {
   width: 100%; padding: 0.5rem 2rem 0.5rem 2rem; border-radius: 8px;
   border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg);
   font-size: 0.8125rem; font-family: inherit; color: var(--vp-c-text-1); transition: border-color 0.2s;
+  box-sizing: border-box;
 }
 .si-input:focus { outline: none; border-color: var(--vp-c-brand-1); }
 .si-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--vp-c-text-3); cursor: pointer; font-size: 1rem; }
-.res-n { font-size: 0.75rem; color: var(--vp-c-text-3); white-space: nowrap; }
+.res-n { font-size: 0.75rem; color: var(--vp-c-text-3); white-space: nowrap; flex-shrink: 0; }
+
+/* ── Table wrapper (scrollable on mobile) ── */
+
+.dtbl-wrap {
+  overflow-x: auto; -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--vp-c-divider); border-radius: 8px;
+}
+
+/* ── Data table ── */
 
-/* ─── Data table ─── */
 .dtbl {
   width: 100%; border-collapse: collapse;
-  border: 1px solid var(--vp-c-divider); border-radius: 8px; overflow: hidden;
-  font-size: 0.8125rem;
+  font-size: 0.8125rem; min-width: 600px;
 }
 .dtbl thead { background: var(--vp-c-bg-soft); }
 .dtbl th {
@@ -465,11 +493,10 @@ onUnmounted(() => {
 /* Column widths */
 .c-sym { width: 70px; }
 .c-sym code { font-size: 0.8125rem; color: var(--vp-c-brand-1); background: rgba(45,44,105,0.05); padding: 0.05rem 0.4rem; border-radius: 3px; }
-.c-name { min-width: 140px; }
+.c-name { min-width: 140px; white-space: normal !important; }
 .c-name a { color: var(--vp-c-text-1); text-decoration: none; font-weight: 500; }
 .c-name a:hover { color: var(--vp-c-brand-1); }
 .c-alt { display: block; font-size: 0.6875rem; color: var(--vp-c-text-3); margin-top: 0.1rem; white-space: normal; }
-.c-name { white-space: normal !important; }
 .c-uid { min-width: 120px; }
 .c-uid code { font-size: 0.75rem; color: var(--vp-c-text-3); background: none; padding: 0; }
 .c-dim { width: 100px; }
@@ -489,7 +516,8 @@ onUnmounted(() => {
 .badge-derived { background: rgba(87,160,254,0.08); border-color: rgba(87,160,254,0.25); color: #57a0fe; }
 .more { font-size: 0.6875rem; color: var(--vp-c-text-3); margin-left: 0.2rem; }
 
-/* State messages */
+/* ── State messages ── */
+
 .state-msg { padding: 3rem 1rem; text-align: center; color: var(--vp-c-text-3); }
 .state-msg.err { color: var(--vp-c-danger-1); }
 .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@@ -500,22 +528,22 @@ onUnmounted(() => {
 }
 .clear-search-btn:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
 
-/* Skeleton */
+/* ── Skeleton ── */
+
 .skeleton-wrapper { padding: 1rem 0; }
 .skeleton-row { display: flex; gap: 0.75rem; padding: 0.5rem 0; }
 .skeleton-cell { height: 16px; background: var(--vp-c-bg-soft); border-radius: 4px; }
 
-/* Responsive */
-@media (max-width: 768px) {
-  .udb-content { padding: 1rem 1rem 2rem; }
-  .udb-header { padding: 1rem; }
-  .udb-header-inner { flex-direction: column; align-items: flex-start; }
-  .stats-bar { gap: 0.5rem; }
-  .stat-divider { display: none; }
-  .stat-dl-group { margin-left: 0; width: 100%; }
-  .dtbl { font-size: 0.75rem; }
-  .dtbl th, .dtbl td { padding: 0.35rem 0.5rem; }
-  .c-uid { display: none; }
-  .search-box { max-width: none; }
+/* ── Desktop (≥ 768px) ── */
+
+@media (min-width: 768px) {
+  .udb-content { padding: 1.25rem 1.5rem 2rem; }
+  .udb-header { padding: 1.25rem 1.5rem; }
+  .udb-header-inner { align-items: center; }
+  .udb-title { font-size: 1.5rem; }
+  .stats-bar { overflow-x: visible; }
+  .stat-divider { display: block; }
+  .stat-dl-group { margin-left: auto; }
+  .search-box { max-width: 400px; }
 }
 </style>
diff --git a/.vitepress/theme/components/UnitsDBEntityDetail.vue b/.vitepress/theme/components/UnitsDBEntityDetail.vue
index 5ac51c4..f91f14b 100644
--- a/.vitepress/theme/components/UnitsDBEntityDetail.vue
+++ b/.vitepress/theme/components/UnitsDBEntityDetail.vue
@@ -558,10 +558,12 @@ async function copyLink() {
 </template>
 
 <style scoped>
+/* ── Mobile-first defaults ── */
+
 .ep {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 1.25rem 2rem 3rem;
+  padding: 1rem 1rem 3rem;
   font-size: 0.9375rem;
   min-height: 70vh;
 }
@@ -569,7 +571,9 @@ async function copyLink() {
 /* Breadcrumb */
 .ep-bc {
   display: flex; align-items: center; gap: 0.4rem;
-  font-size: 0.8125rem; margin-bottom: 1.25rem; color: var(--vp-c-text-3);
+  font-size: 0.8125rem; margin-bottom: 1rem; color: var(--vp-c-text-3);
+  overflow-x: auto; -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
 }
 .ep-bc a { color: var(--vp-c-text-3); text-decoration: none; }
 .ep-bc a:hover { color: var(--vp-c-brand-1); }
@@ -590,10 +594,10 @@ async function copyLink() {
 }
 .ep-btn-primary:hover { background: var(--vp-c-brand-2); }
 
-/* Compact header */
+/* Header: stack vertically on mobile */
 .ep-header {
-  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
-  margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vp-c-divider);
+  display: flex; flex-direction: column; gap: 0.75rem;
+  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vp-c-divider);
 }
 .ep-header-left { flex: 1; min-width: 0; }
 .ep-header-row1 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
@@ -603,10 +607,10 @@ async function copyLink() {
   background: var(--vp-c-brand-1); color: #fff;
 }
 .ep-name {
-  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
+  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
   line-height: 1.2; margin: 0; color: var(--vp-c-text-1);
 }
-.ep-sym-lg { font-size: 1.75rem; font-weight: 300; color: var(--vp-c-text-3); font-family: inherit; }
+.ep-sym-lg { font-size: 1.5rem; font-weight: 300; color: var(--vp-c-text-3); font-family: inherit; }
 .ep-i18n { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.35rem; }
 .ep-i18n-chip {
   font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 4px;
@@ -619,12 +623,12 @@ async function copyLink() {
   border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg);
   color: var(--vp-c-text-2); font-size: 0.75rem; font-weight: 500;
   cursor: pointer; transition: all 0.2s; font-family: inherit;
-  flex-shrink: 0;
+  flex-shrink: 0; align-self: flex-start;
 }
 .ep-copy-btn:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
 
-/* Two-column body */
-.ep-body { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
+/* Body: single column on mobile */
+.ep-body { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
 
 /* Sections */
 .ep-sec { margin-bottom: 1.25rem; }
@@ -654,7 +658,7 @@ async function copyLink() {
 /* Symbol display */
 .ep-sym-display { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
 .ep-sym-rendered {
-  font-size: 1.75rem; font-weight: 300; padding: 0.5rem 1rem;
+  font-size: 1.5rem; font-weight: 300; padding: 0.4rem 0.75rem;
   background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider);
   border-radius: 6px; line-height: 1;
 }
@@ -713,8 +717,8 @@ async function copyLink() {
 /* Description */
 .ep-desc { color: var(--vp-c-text-2); line-height: 1.6; margin: 0; font-size: 0.875rem; }
 
-/* Properties grid */
-.ep-prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--vp-c-divider); border-radius: 6px; overflow: hidden; }
+/* Properties grid: single column on mobile */
+.ep-prop-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--vp-c-divider); border-radius: 6px; overflow: hidden; }
 .ep-prop-item {
   padding: 0.4rem 0.6rem; background: var(--vp-c-bg);
   display: flex; flex-direction: column; gap: 0.1rem;
@@ -791,13 +795,24 @@ async function copyLink() {
 .ep-json-view { margin-top: 0.5rem; border: 1px solid var(--vp-c-divider); border-radius: 6px; overflow: hidden; }
 .ep-json-view pre { margin: 0; padding: 0.75rem; font-size: 0.6875rem; line-height: 1.5; overflow-x: auto; background: var(--vp-c-bg-soft); }
 
-/* Responsive */
-@media (max-width: 768px) {
-  .ep { padding: 1rem 1rem 3rem; }
-  .ep-header { flex-direction: column; }
-  .ep-name { font-size: 1.25rem; }
-  .ep-sym-lg { font-size: 1.5rem; }
-  .ep-body { grid-template-columns: 1fr; }
-  .ep-sym-rendered { font-size: 1.5rem; padding: 0.4rem 0.75rem; }
+/* ── Desktop overrides ── */
+
+@media (min-width: 640px) {
+  .ep-prop-grid { grid-template-columns: 1fr 1fr; }
+}
+
+@media (min-width: 900px) {
+  .ep { padding: 1.25rem 2rem 3rem; }
+
+  .ep-bc { margin-bottom: 1.25rem; overflow-x: visible; white-space: normal; }
+
+  .ep-header { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 1rem; }
+
+  .ep-name { font-size: 1.5rem; }
+  .ep-sym-lg { font-size: 1.75rem; }
+
+  .ep-body { grid-template-columns: 1fr 380px; gap: 2rem; }
+
+  .ep-sym-rendered { font-size: 1.75rem; padding: 0.5rem 1rem; }
 }
 </style>
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
index f4472e5..e9db4fa 100644
--- a/.vitepress/theme/custom.css
+++ b/.vitepress/theme/custom.css
@@ -545,6 +545,9 @@
 /* Smooth scrolling */
 html {
   scroll-behavior: smooth;
+}
+
+body {
   overflow-x: hidden;
 }