agentworkshop 0.7.39 → 0.7.41

package/app/pages/settings.vue

@@ -55,7 +55,8 @@ async function saveRuntime() {
       : { type: 'success', text: t('settings.runtime.savedLive') }
   }
   catch (e) {
-    runtimeNotice.value = { type: 'error', text: e?.response?.data?.message || e?.message || String(e) }
+    const err = e as { response?: { data?: { message?: string } }, message?: string }
+    runtimeNotice.value = { type: 'error', text: err?.response?.data?.message || err?.message || String(e) }
   }
   finally {
     savingRuntime.value = false
@@ -71,7 +72,8 @@ async function resetRuntimeKey(key: string) {
     runtimeNotice.value = { type: 'success', text: t('settings.runtime.keyReset', { key }) }
   }
   catch (e) {
-    runtimeNotice.value = { type: 'error', text: e?.response?.data?.message || e?.message || String(e) }
+    const err = e as { response?: { data?: { message?: string } }, message?: string }
+    runtimeNotice.value = { type: 'error', text: err?.response?.data?.message || err?.message || String(e) }
   }
 }
 
@@ -82,7 +84,8 @@ async function resetAllRuntime() {
     runtimeNotice.value = { type: 'success', text: t('settings.runtime.resetAllDone') }
   }
   catch (e) {
-    runtimeNotice.value = { type: 'error', text: e?.response?.data?.message || e?.message || String(e) }
+    const err = e as { response?: { data?: { message?: string } }, message?: string }
+    runtimeNotice.value = { type: 'error', text: err?.response?.data?.message || err?.message || String(e) }
   }
 }
 
@@ -699,7 +702,7 @@ const tabs = computed(() => [
                     :title="t('settings.groups.defaultCollapsed')"
                     @click="setGroupDefaultCollapsed(g)"
                   >
-                    <span :class="g.collapsed ? 'i-tabler-fold' : 'i-tabler-unfold'" />
+                    <span :class="g.collapsed ? 'i-tabler-chevrons-down' : 'i-tabler-chevrons-up'" />
                   </button>
                   <button
                     v-if="g.source === 'user'"
@@ -747,19 +750,19 @@ const tabs = computed(() => [
                   <div class="rt-ctrl">
                     <a-input-number
                       v-if="item.type === 'number'"
-                      v-model:value="draft[item.key]"
+                      v-model:value="(draft[item.key] as string | number | undefined)"
                       :min="item.min"
                       :max="item.max"
                       @change="markDirty(item.key)"
                     />
                     <a-switch
                       v-else-if="item.type === 'boolean'"
-                      v-model:checked="draft[item.key]"
+                      v-model:checked="(draft[item.key] as string | number | boolean | undefined)"
                       @change="markDirty(item.key)"
                     />
                     <a-select
                       v-else-if="item.type === 'select'"
-                      v-model:value="draft[item.key]"
+                      v-model:value="(draft[item.key] as string | number | undefined)"
                       style="width: 160px"
                       :options="(item.options ?? []).map(o => ({ label: o, value: o }))"
                       @change="markDirty(item.key)"
@@ -782,7 +785,7 @@ const tabs = computed(() => [
                     </span>
                     <a-input
                       v-else
-                      v-model:value="draft[item.key]"
+                      v-model:value="(draft[item.key] as string | number | undefined)"
                       style="width: 220px"
                       @change="markDirty(item.key)"
                     />
@@ -1034,7 +1037,7 @@ const tabs = computed(() => [
   align-items: center;
   padding: 8px 14px;
   font-family: var(--font-body);
-  font-size: 12.5px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--ink-soft);
   cursor: pointer;
@@ -1094,7 +1097,7 @@ const tabs = computed(() => [
 .set-sub {
   max-width: 52ch;
   margin-top: 3px;
-  font-size: 12.5px;
+  font-size: 13px;
   line-height: 1.5;
   color: var(--ink-faint);
 }
@@ -1142,7 +1145,7 @@ const tabs = computed(() => [
 
 .identity-note {
   margin: 14px 0 0;
-  font-size: 12px;
+  font-size: 12.5px;
   color: var(--ink-faint);
 }
 
@@ -1238,7 +1241,7 @@ const tabs = computed(() => [
 .rt-group-badge {
   flex: none;
   padding: 1px 7px;
-  font-size: 10px;
+  font-size: 11.5px;
   color: var(--ink-faint);
   border: 1px solid var(--glass-line);
   border-radius: 99px;
@@ -1251,7 +1254,7 @@ const tabs = computed(() => [
 
 .rt-group-fields {
   flex: none;
-  font-size: 10.5px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 
@@ -1285,7 +1288,7 @@ const tabs = computed(() => [
 
 .rt-group-empty {
   margin: 10px 0 4px;
-  font-size: 12px;
+  font-size: 12.5px;
   color: var(--ink-faint);
 }
 
@@ -1329,7 +1332,7 @@ const tabs = computed(() => [
 .rt-sub {
   max-width: 46ch;
   margin-top: 3px;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.5;
   color: var(--ink-faint);
 }
@@ -1337,7 +1340,7 @@ const tabs = computed(() => [
 .rt-tag {
   padding: 1px 7px;
   font-family: var(--font-mono);
-  font-size: 10.5px;
+  font-size: 11.5px;
   font-weight: 500;
   line-height: 1.5;
   color: var(--ink-faint);
@@ -1402,7 +1405,7 @@ const tabs = computed(() => [
 
 .rt-path {
   margin-left: auto;
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 
@@ -1436,7 +1439,7 @@ const tabs = computed(() => [
   gap: 5px;
   align-items: center;
   max-width: 320px;
-  font-size: 12px;
+  font-size: 12.5px;
   line-height: 1.4;
 }
 
@@ -1481,13 +1484,79 @@ const tabs = computed(() => [
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .settings-layout { flex-direction: column; }
+/* ══ 窄屏(≤899px,对齐 useResponsive 的 drawer 档)═══════════════════════
+   桌面是"左栏菜单 180px + 右栏内容"的双栏仪表台。窄屏若仍并排,
+   内容区只剩 ~170px,描述文字被压成"一次一个字"的竖排长条(375px 实测)。
+   窄屏改为:菜单在上,收成一条可横扫的标签带;内容在下,占满整宽。
+   注:原先把这段堆叠规则误写在 prefers-reduced-motion 里 ——
+   那样只有"减少动效"的用户才看到正确布局,是反的,已移到宽度断点。 */
+@media (max-width: 899px) {
+  .settings-layout {
+    flex-direction: column;
+    min-height: 0;
+  }
+
   .settings-nav {
-    flex-direction: row;
     flex: none;
+    flex-direction: row;
+    gap: 6px;
+    padding: 8px 10px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
     border-right: 0;
     border-bottom: 1px solid var(--line);
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .settings-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-item {
+    flex: none;
+    width: auto;
+    min-height: 40px;
+    padding: 8px 14px;
+    white-space: nowrap;
+  }
+
+  .settings-body {
+    padding: 16px 12px;
+  }
+
+  /* 卡片内边距在窄屏收边,把宽度让给内容 */
+  .settings-card :deep(.ant-card-body) {
+    padding: 12px;
+  }
+
+  /* 正文说明文字窄屏抬到 13px 地板 */
+  .set-sub,
+  .rt-sub,
+  .section-desc,
+  .identity-note,
+  .rt-group-empty,
+  .plugin-health {
+    font-size: 13px;
+  }
+
+  .rt-group-desc {
+    flex: 1 1 100%;
+  }
+
+  /* 手指命中区:分组操作按钮只有 24px 高 */
+  .rt-group-ops .mini-btn,
+  .rt-group-head .mini-btn {
+    min-width: 40px;
+    min-height: 40px;
+    padding: 6px 10px;
+  }
+}
+
+/* 无 hover 的设备(手机/平板):分组操作不能只在 hover 时才出现 */
+@media (hover: none) {
+  .rt-group-ops {
+    opacity: 1;
   }
 }
 </style>

package/app/pages/tokens.vue

@@ -603,4 +603,27 @@ useHead({ title: () => tt('titles.tokens') })
 }
 
 .text-primary { color: var(--accent); }
+
+/* ══ 窄屏(v9):页头操作占满行 / token 表格横向卷轴 + 首列可读 ═════════════ */
+@media (max-width: 900px) {
+  .head-actions { width: 100%; }
+  .head-actions :deep(.ant-btn) {
+    flex: 1 1 100%;
+    width: 100%;
+    min-height: 40px;
+  }
+
+  .page :deep(.ant-table-content) table { min-width: 880px; }
+
+  .page :deep(.ant-table-thead > tr > th:first-child),
+  .page :deep(.ant-table-tbody > tr > td:first-child) { min-width: 132px; }
+}
+
+@media (max-width: 640px) {
+  .sub { font-size: 11.5px; line-height: 1.5; }
+  .once-meta { flex-direction: column; gap: 4px; }
+  .page :deep(.ant-table) .ant-btn-sm { min-height: 32px; }
+  .tok-op { min-width: 32px; }
+  .raw-op { width: 44px; min-height: 44px; }
+}
 </style>

package/app/pages/town.vue

@@ -21,14 +21,59 @@ const wsStore = useWorkspacesStore()
 const { subscribe, unsubscribe } = useWorkshopWs()
 
 // 认证 gate + workspace 加载
+//
+// ⚠️ 必须先确认"真的没有会话"再弹回工作台。只判 userStore.isLoggedIn 会与
+// session-restore 插件**竞态**:该插件是异步的(拿 cookie 里的 token 换用户信息),
+// 而 onMounted 同步就执行了 —— 结果刷新 /town 时已登录用户被误弹回 /workshop,
+// 整页 3D 根本加载不出来(实测:E2E 里 /town 在窄屏稳定超时,根因就在这里)。
+// 判据改成"token cookie 在不在":cookie 在 → 等服务端会话恢复;cookie 不在 → 立刻回去。
+const tokenCookie = useCookie<string | null>('token')
 const authReady = ref(false)
-onMounted(() => {
-  if (!userStore.isLoggedIn) {
-    navigateTo('/workshop')
+
+/**
+ * ⚠️ 加载必须**等会话恢复完成**再发。
+ *
+ * 这里踩过两次,值得写清楚:
+ *  1. 原来在 onMounted 里同步判 isLoggedIn —— session-restore 插件是异步的,
+ *     判定早于恢复 → 已登录用户被误弹回 /workshop(整页 3D 加载不出来)。
+ *     更糟的是它"看起来通过了":弹到 /workshop 后那边有顶栏,响应式属性照样被写上,
+ *     于是自动化验收把 /town 记成"通过",而用户看到的其实是工作台。
+ *  2. 改成只看 cookie 就放行也不行:此时 store 里还没有 token,wsStore.load() 的请求
+ *     不带 Authorization → 401 → 工作区列表为空 → 页面永远停在
+ *     「还没有挂载任何 Channel」的空态(实测 390/1440 都是这个结果)。
+ *
+ * 正确顺序:等 isLoggedIn 为真(会话恢复成功)再 load;只有连 cookie 都没有、
+ * 或者 token 被插件判废清掉时,才回工作台。
+ */
+// 与会话恢复的协作顺序,与 /workshop 总览页**完全一致**
+// (refresh → 再 load)。少一步 refresh 时,首次硬导航到 /town 会因为
+// 会话尚未落定而拿到空工作区列表,页面永远停在加载态(实测)。
+watch(() => userStore.isLoggedIn, async (ok) => {
+  if (!ok) {
+    authReady.value = false
     return
   }
-  authReady.value = true
-  void wsStore.load()
+  // immediate 会在 SSR 期间也跑一次;服务端既没有 localStorage(load 会写本地态),
+  // 也不需要加载用户工作区 —— store 侧已加守卫,这里再显式挡一道。
+  if (!import.meta.client) return
+  await userStore.refresh()
+  if (!userStore.isLoggedIn) return
+  try {
+    await wsStore.load()
+    authReady.value = true
+  }
+  catch {
+    // 客户端可重试;服务端静默(message 依赖 DOM)
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  if (!userStore.isLoggedIn && !tokenCookie.value) navigateTo('/workshop')
+})
+
+// 会话恢复失败(token 已失效被插件清掉)时,才是真的未登录 —— 这时再回去
+watch(tokenCookie, (v) => {
+  if (!v && !userStore.isLoggedIn) navigateTo('/workshop')
 })
 
 // 收集所有已挂载 channel 的 id

package/app/pages/users.vue

@@ -246,4 +246,27 @@ useHead({ title: () => t('titles.users') })
 .gate-icon { font-size: 32px; color: var(--ink-faint); }
 .gate-title { margin: 0; font-size: 15px; font-weight: 600; }
 .gate-hint { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
+
+/* ══ 窄屏(v9):页头搜索框占满行 / 表格横向卷轴 + 首列可读 ═════════════════ */
+@media (max-width: 900px) {
+  .page-wrap { max-width: 100%; }
+
+  /* 模板里写死了 width:240px 的内联样式,窄屏必须让位给整行 */
+  .aw-page-head :deep(.ant-input-search) {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .page-wrap :deep(.ant-table-content) table { min-width: 780px; }
+
+  .page-wrap :deep(.ant-table-thead > tr > th:first-child),
+  .page-wrap :deep(.ant-table-tbody > tr > td:first-child) { min-width: 128px; }
+}
+
+@media (max-width: 640px) {
+  .admin-tag { transform: none; }
+  .sub { font-size: 11.5px; line-height: 1.5; }
+  .page-wrap :deep(.ant-table) .ant-btn-sm { min-height: 34px; }
+  .page-wrap :deep(.ant-table) .ant-select-single { min-width: 84px; }
+}
 </style>

package/app/pages/workshop/agents.vue

@@ -261,12 +261,13 @@ useHead({ title: () => tt('titles.agents') })
               :class="visTag(record).icon"
             />{{ visTag(record).text }}
           </a-tag>
+          <!-- 开关**不带文字**:左边那枚 tag 已经在说"公开/私有"了。
+               两处同时显示同一个词,是同一列里把一条信息讲了两遍(实测桌面版每行都这样)。
+               开关只负责"可切换"这个动作,语义由 tag + title 承载。 -->
           <a-switch
             v-if="!record.isBuiltin && canWrite(record)"
             :checked="record.visibility === 'public'"
             size="small"
-            checked-children="公开"
-            un-checked-children="私有"
             :title="record.visibility === 'public' ? '点击转为私有' : '点击公开(全员可读可用)'"
             @change="(v: unknown) => toggleVisibility(record, v === true)"
           />
@@ -516,4 +517,93 @@ h2 { margin: 0 0 4px; }
 .inst-id,
 .inst-ch { font-family: var(--font-mono); opacity: 0.6; }
 .empty { padding: 6px 0; font-size: 12px; opacity: 0.4; }
+
+/* ══ 窄屏(v9):页头纵向堆叠 / 筛选条换行 / 表格横向卷轴 + 首列可读 ═════════ */
+@media (max-width: 900px) {
+  .head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .head > div { min-width: 0; }
+  .head h2 { font-size: 21px; line-height: 1.25; }
+
+  .head :deep(.ant-space) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .head :deep(.ant-space-item) { width: 100%; }
+  .head :deep(.ant-btn) { width: 100%; min-height: 40px; }
+
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar :deep(.ant-segmented) {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .admin-note {
+    flex: 1 1 100%;
+    min-width: 0;
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+
+  /* 整表给出可读下限:横向卷轴交给全局 v5 的 .ant-table-content */
+  .page :deep(.ant-table-content) table { min-width: 828px; }
+
+  /* 有 expandedRowRender 时 antd 会把"展开图标列"放在第一列,而全局 v5 钉住的正是第一列。
+     auto 布局下没有显式宽度的列会吃掉全部余量 → 展开列白占 ~115px,真正的身份列还会被卷走。
+     这里把展开列收成 44px,并让身份列(模板名)紧随其后一起钉住:横扫时始终知道这一行是谁。 */
+  .page :deep(.ant-table colgroup col:first-child) { width: 44px; }
+
+  .page :deep(.ant-table-thead > tr > th:first-child),
+  .page :deep(.ant-table-tbody > tr > td:first-child) {
+    width: 44px;
+    min-width: 44px;
+    padding-right: 2px;
+    padding-left: 6px;
+  }
+
+  .page :deep(.ant-table-thead > tr > th:nth-child(2)),
+  .page :deep(.ant-table-tbody > tr > td:nth-child(2)) {
+    position: sticky;
+    left: 44px;
+    z-index: 2;
+    min-width: 132px;
+    background: var(--paper-raised);
+    box-shadow: 1px 0 0 var(--line);
+  }
+
+  .page :deep(.ant-table-thead > tr > th:nth-child(2)) { z-index: 3; }
+}
+
+@media (max-width: 640px) {
+  .page { padding: 0; }
+  .head h2 { font-size: 19px; }
+  .sub { font-size: 11.5px; line-height: 1.5; }
+  .tpl-name { min-width: 120px; }
+  .page :deep(.ant-table) .ant-btn-sm { min-height: 34px; }
+}
+
+/* 触摸命中区:antd 小开关本体只有 28×16(手指点不中),视觉尺寸保持不变,
+   用伪元素把命中区外扩到 ~40×40 —— 与全局 v5 给展开图标做的事同一手法。
+   行内没有相邻可点元素(可见性列是 tag+switch,启用列只有 switch),不会误伤。 */
+@media (max-width: 900px) {
+  .page :deep(.ant-switch) { position: relative; }
+
+  .page :deep(.ant-switch)::after {
+    position: absolute;
+    inset: -12px -6px;
+    content: '';
+  }
+}
 </style>

package/app/pages/workshop/channel-templates.vue

@@ -454,4 +454,57 @@ h2 { margin: 0 0 4px; }
   border-style: dashed;
 }
 .big { font-size: 28px; }
+
+/* ══ 窄屏(v9):页头纵向堆叠 / 筛选条换行 / 卡片单列 + 卡片底栏换行 ═══════ */
+@media (max-width: 900px) {
+  .head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .head > div { min-width: 0; }
+  .head h2 { font-size: 21px; line-height: 1.25; }
+
+  .head :deep(.ant-space) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .head :deep(.ant-space-item) { width: 100%; }
+  .head :deep(.ant-btn) { width: 100%; min-height: 40px; }
+
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar :deep(.ant-segmented) {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .admin-note {
+    flex: 1 1 100%;
+    min-width: 0;
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+
+  .grid { grid-template-columns: 1fr; }
+  .card-head { flex-wrap: wrap; }
+  .member-line { flex-wrap: wrap; }
+  .card-foot { flex-wrap: wrap; }
+  .ws { max-width: 100%; }
+}
+
+@media (max-width: 640px) {
+  .page { padding: 0; }
+  .head h2 { font-size: 19px; }
+  .sub { font-size: 11.5px; line-height: 1.5; }
+  .scenario { font-size: 11.5px; }
+}
 </style>

package/app/pages/workshop/index.vue

@@ -483,6 +483,20 @@ useHead({ title: () => t('titles.workshop') })
   align-items: flex-end;
 }
 
+/* 窄屏:页头已经纵向堆叠(见 main.css v5),这一组也必须改成"左对齐 + 按钮满行"。
+ * 否则会出现"文字链居中、主按钮靠右"的错位 —— 两行不同对齐轴,读起来像两组东西(实测 /workshop)。 */
+@media (max-width: 900px) {
+  .head-acts {
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .lib-links {
+    justify-content: flex-start;
+    gap: 8px 16px;
+  }
+}
+
 /* 库链接行:安静文字链(降噪,主 CTA 只剩一个) */
 .lib-links { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; justify-content: flex-end; }
 

package/app/pages/workshop/teams.vue

@@ -50,9 +50,9 @@ const loadHarnessAvail = async (): Promise<void> => {
 }
 if (import.meta.client) void loadHarnessAvail()
 const tplUnavailable = (tpl: AgentTemplateDto): boolean => harnessAvail.value[tpl.harness] === false
-const memberOptions = computed(() => templates.value.map((t) => {
-  const un = tplUnavailable(t)
-  return { value: t.id, label: un ? `${t.name}(${t.harness} · ${t('agents.notInstalled')})` : `${t.name}(${t.harness})`, disabled: un }
+const memberOptions = computed(() => templates.value.map((tpl) => {
+  const un = tplUnavailable(tpl)
+  return { value: tpl.id, label: un ? `${tpl.name}(${tpl.harness} · ${t('agents.notInstalled')})` : `${tpl.name}(${tpl.harness})`, disabled: un }
 }))
 
 // ===== 过滤 =====
@@ -312,12 +312,12 @@ useHead({ title: () => t('titles.teams') })
                 :class="visTag(team).icon"
               />{{ visTag(team).text }}
             </a-tag>
+            <!-- 开关不带文字:左边那枚 tag 已经在说"公开/私有"了(与模板库同一条规则) -->
             <a-switch
               v-if="!team.isBuiltin && canWrite(team)"
               :checked="team.visibility === 'public'"
               size="small"
-              checked-children="公开"
-              un-checked-children="私有"
+              :title="team.visibility === 'public' ? '点击转为私有' : '点击公开(全员可部署)'"
               @change="(v: unknown) => toggleVisibility(team, v === true)"
             />
             <span class="owner">{{ team.ownerName ?? '-' }}</span>
@@ -340,10 +340,13 @@ useHead({ title: () => t('titles.teams') })
                 </a-menu>
               </template>
             </a-dropdown>
+            <!-- 用 outlined 而不是 text:text 按钮在卡片头上与旁边的 owner 文本
+                 长得一模一样,用户看不出这里是**唯一的主操作**(实测三张卡片都如此)。 -->
             <a-button
               v-else
+              class="deploy-btn"
               size="small"
-              type="text"
+              type="default"
               :title="$t('teams.kxheuf1001')"
               @click="openDeploy(team)"
             >
@@ -591,6 +594,12 @@ h2 { margin: 0 0 4px; }
   font-size: 11px;
   color: var(--ink-faint);
 }
+.deploy-btn {
+  flex: none;
+  font-size: 11.5px;
+  border-color: var(--line-strong);
+}
+
 .op { cursor: pointer; opacity: 0.4; }
 .op:hover { opacity: 1; }
 .members {
@@ -677,4 +686,55 @@ h2 { margin: 0 0 4px; }
   line-height: 1.5;
   color: var(--ink-faint);
 }
+
+/* ══ 窄屏(v9):页头纵向堆叠 / 筛选条换行 / 卡片单列 ══════════════════════ */
+@media (max-width: 900px) {
+  .head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .head > div { min-width: 0; }
+  .head h2 { font-size: 21px; line-height: 1.25; }
+
+  .head :deep(.ant-space) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .head :deep(.ant-space-item) { width: 100%; }
+  .head :deep(.ant-btn) { width: 100%; min-height: 40px; }
+
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar :deep(.ant-segmented) {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .admin-note {
+    flex: 1 1 100%;
+    min-width: 0;
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+
+  .grid { grid-template-columns: 1fr; }
+  .card-head { flex-wrap: wrap; }
+  .member { flex-wrap: wrap; }
+  .member-harness { font-size: 11.5px; }
+}
+
+@media (max-width: 640px) {
+  .page { padding: 0; }
+  .head h2 { font-size: 19px; }
+  .sub { font-size: 11.5px; line-height: 1.5; }
+}
 </style>