fix(ui): improve mobile shell and mcp catalog layout

Author: lukyrys

scripts/audit-wdc-ui.mjs

@@ -227,6 +227,7 @@ async function auditRoute(page, mode, route) {
 
   await page.goto(`http://127.0.0.1:5190/#${route}`, { waitUntil: 'domcontentloaded', timeout: 5000 })
   await waitSettled(page)
+  await closeTransientUi(page)
   entry.finalUrl = page.url()
   entry.title = await page.title().catch(() => null)
   entry.h1 = await page.locator('h1').first().textContent({ timeout: 1000 }).catch(() => null)

scripts/review-wdc-ui-ux.mjs

@@ -163,6 +163,11 @@ async function waitSettled(page) {
   await page.waitForTimeout(300)
 }
 
+async function closeTransientUi(page) {
+  await page.keyboard.press('Escape').catch(() => {})
+  await page.waitForTimeout(120)
+}
+
 async function setMode(page, mode) {
   await page.goto('http://127.0.0.1:5190/#/sites', { waitUntil: 'domcontentloaded', timeout: 5000 })
   await waitSettled(page)
@@ -204,10 +209,11 @@ try {
     const checks = []
     for (const vp of viewports) {
       await page.setViewportSize({ width: vp.width, height: vp.height })
-      await setMode(page, routeEntry.mode)
-      await page.goto(`http://127.0.0.1:5190/#${routeEntry.route}`, { waitUntil: 'domcontentloaded', timeout: 5000 })
-      await waitSettled(page)
-      const metrics = await page.evaluate(() => {
+    await setMode(page, routeEntry.mode)
+    await page.goto(`http://127.0.0.1:5190/#${routeEntry.route}`, { waitUntil: 'domcontentloaded', timeout: 5000 })
+    await waitSettled(page)
+    await closeTransientUi(page)
+    const metrics = await page.evaluate(() => {
       const parseColor = (raw) => {
         const match = String(raw).match(/rgba?\(([^)]+)\)/)
         if (!match) return null

src/frontend/src/App.vue

@@ -498,8 +498,8 @@ onUnmounted(() => {
 }
 
 @media (max-width: 959px) {
-  .sidebar-desktop {
-    display: none;
+  .app-body > .sidebar-desktop {
+    display: none !important;
   }
   .hamburger-btn {
     display: flex;

src/frontend/src/components/layout/AppHeader.vue

@@ -309,4 +309,40 @@ function isActive(path: string) {
 }
 .update-label { letter-spacing: 0.02em; }
 
+@media (max-width: 760px) {
+  .app-header {
+    padding: 0 8px;
+    gap: 8px;
+  }
+
+  .logo-copy,
+  .conn-pill {
+    display: none;
+  }
+
+  .header-nav {
+    justify-content: flex-start;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .header-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-tab {
+    padding: 7px 10px;
+    font-size: 0.78rem;
+  }
+
+  .header-right {
+    gap: 6px;
+  }
+
+  .update-badge {
+    min-width: 40px;
+    padding: 0 8px;
+  }
+}
+
 </style>

src/frontend/src/components/mcp/McpOnboardingPanel.vue

@@ -4,7 +4,7 @@
       <div class="onboarding-title">
         🚀 {{ t('mcpOnboarding.title') }}
       </div>
-      <el-button size="small" link @click="dismissed = true">
+      <el-button size="small" text class="dismiss-btn" @click="dismissed = true">
         {{ t('mcpOnboarding.dismiss') }}
       </el-button>
     </div>
@@ -247,14 +247,40 @@ onBeforeUnmount(() => {
   display: flex; align-items: center; gap: 8px;
 }
 .recommended-tag { font-size: 10px; }
-.profile-desc { font-size: 12px; }
+.profile-desc { font-size: 13px; line-height: 1.45; }
 .profile-bullets {
   margin: 4px 0 0;
   padding-left: 16px;
-  font-size: 11px;
+  font-size: 12px;
+  line-height: 1.4;
   color: var(--el-text-color-secondary);
 }
 .profile-bullets li { margin-bottom: 2px; }
 .profile-cta { margin-top: auto; align-self: flex-start; }
 .muted { color: var(--el-text-color-secondary); }
+.dismiss-btn {
+  min-height: 32px;
+  color: var(--wdc-text-2) !important;
+  background: var(--wdc-surface-2) !important;
+  border: 1px solid var(--wdc-border) !important;
+}
+.recommended-tag {
+  min-height: 24px;
+  font-size: 0.72rem;
+}
+
+@media (max-width: 640px) {
+  .mcp-onboarding-panel {
+    padding: 14px;
+  }
+
+  .onboarding-header {
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .profile-cards {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/frontend/src/components/pages/McpKinds.vue

@@ -322,9 +322,9 @@ async function refresh(): Promise<void> {
 
 <style scoped>
 .page { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
-.page-header { display: flex; align-items: center; justify-content: space-between; }
+.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .page-header h2 { margin: 0; }
-.header-actions { display: flex; gap: 8px; }
+.header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
 .lock-count-badge {
   display: inline-block;
   margin-left: 6px;
@@ -346,10 +346,15 @@ async function refresh(): Promise<void> {
   background: var(--el-border-color); margin: 0 4px;
 }
 .filter-toolbar {
-  display: flex; gap: 8px; align-items: center;
+  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
 }
-.filter-toolbar .search-input { max-width: 280px; }
+.filter-toolbar .search-input { width: min(280px, 100%); }
 .filter-toolbar .plugin-select { width: 180px; }
+.filter-toolbar :deep(.el-input__wrapper),
+.filter-toolbar :deep(.el-select__wrapper),
+.filter-toolbar :deep(.el-radio-button__inner) {
+  min-height: 32px;
+}
 .auto-approve-tag {
   cursor: pointer;
   user-select: none;
@@ -359,7 +364,8 @@ async function refresh(): Promise<void> {
 }
 .quick-grant-btn {
   margin-left: 6px;
-  font-size: 11px;
+  min-height: 28px;
+  font-size: 0.76rem;
 }
 .always-confirm-tag {
   font-weight: 600;
@@ -369,4 +375,30 @@ async function refresh(): Promise<void> {
 .always-confirm-tag:hover {
   filter: brightness(1.1);
 }
+
+@media (max-width: 900px) {
+  .page-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .header-actions {
+    justify-content: flex-start;
+  }
+
+  .filter-toolbar .plugin-select,
+  .filter-toolbar :deep(.el-radio-group) {
+    width: 100%;
+  }
+
+  .filter-toolbar :deep(.el-radio-group) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .quick-grant-btn {
+    display: flex;
+    margin: 4px 0 0;
+  }
+}
 </style>