From 3cb62fc116dad6016a8fb7e24d4e85f14055ab01 Mon Sep 17 00:00:00 2001
From: jackwener <jakevingoo@gmail.com>
Date: Thu, 25 Jun 2026 18:04:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui,styles):=20kenji=20audit=20round=203=20f?=
 =?UTF-8?q?indings=202=20and=206=20=E2=80=94=20trigger=20logo=20+=20dvh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@kenji audit msg `232aec0f` (`#my-ai:c28a6293`). Round 3 against
`af66ebb7` post-#249.

**#2 — Plan Reminder select collapsed state was text-only.**
PR #247 added a brand icon to each `<SelectItem>`, but `<SelectValue
/>` defaulted to rendering just the label string — open dropdown
showed a logo, collapsed trigger showed plain text. Build a
`value → { label, icon }` lookup inside `PlanReminderSelect` and pass
a function-child to `SelectValue` so the picked state renders the same
icon + label row the dropdown items render.

**#6 — `100vh` residue in renderer CSS.**
Four sites still on `100vh`:
- `maka-tokens.css:760` `.maka-shell` `height`
- `maka-tokens.css:1941` `.maka-modal` `max-height: calc(100vh - 80px)`
- `styles.css:5028` `.maka-help-modal` `max-height: calc(100vh - 96px)`
- `styles.css:13121` `.maka-onboarding-stack` `min-height: calc(100vh - 84px)`

Replace each with `100dvh` so Electron browser frames with dynamic
chrome (or a future mobile-style viewport) don't get half a viewport
of height calculation drift. Other renderer surfaces already use
`100dvh`; this brings the legacy four into line.

Deferred per kenji's own scope:
- **#1** feishu/dingtalk official-brand-kit sourcing — separate PR.
- **#3 / #4** SettingsSelect / Segmented / ChoiceCard primitive
  unification — design-system refactor; no end-result delta on its
  own.
- **#5** layout-property transitions in sidebar/tabs/accordion —
  kenji explicitly gated on visual smoke harness.
---
 apps/desktop/src/renderer/maka-tokens.css |  4 +--
 apps/desktop/src/renderer/styles.css      |  4 +--
 packages/ui/src/components.tsx            | 41 ++++++++++++++++++-----
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/apps/desktop/src/renderer/maka-tokens.css b/apps/desktop/src/renderer/maka-tokens.css
index e699368c378..3686f519967 100644
--- a/apps/desktop/src/renderer/maka-tokens.css
+++ b/apps/desktop/src/renderer/maka-tokens.css
@@ -757,7 +757,7 @@
   .maka-shell {
     display: grid;
     grid-template-columns: var(--w-sidebar) 1fr;
-    height: 100vh;
+    height: 100dvh;
     background: var(--background);
     color: var(--foreground);
     font-size: var(--font-size-base);
@@ -1938,7 +1938,7 @@
     border-radius: var(--radius-modal);
     box-shadow: var(--shadow-modal);
     width: min(520px, calc(100vw - 48px));
-    max-height: calc(100vh - 80px);
+    max-height: calc(100dvh - 80px);
     overflow: hidden;
     display: flex;
     flex-direction: column;
diff --git a/apps/desktop/src/renderer/styles.css b/apps/desktop/src/renderer/styles.css
index 0440ab08af3..a0f176bc0fa 100644
--- a/apps/desktop/src/renderer/styles.css
+++ b/apps/desktop/src/renderer/styles.css
@@ -5025,7 +5025,7 @@ button:active {
 
 .maka-help-modal {
   width: min(560px, calc(100vw - 48px));
-  max-height: calc(100vh - 96px);
+  max-height: calc(100dvh - 96px);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05);
@@ -13118,7 +13118,7 @@ button:active {
   align-content: start;
   justify-items: center;
   width: 100%;
-  min-height: calc(100vh - 84px);
+  min-height: calc(100dvh - 84px);
   padding: clamp(40px, 7vh, 76px) 28px 48px;
 }
 
diff --git a/packages/ui/src/components.tsx b/packages/ui/src/components.tsx
index 94430ca0fd5..bd0ef0335dc 100644
--- a/packages/ui/src/components.tsx
+++ b/packages/ui/src/components.tsx
@@ -2007,6 +2007,30 @@ function PlanReminderSelect<T extends string>(props: {
   ariaLabel: string;
   disabled?: boolean;
 }) {
+  // PR audit3 (@kenji msg `232aec0f` finding #2): the dropdown items
+  // already render the brand icon, but the collapsed `<SelectValue />`
+  // was falling back to the plain label string — open dropdown showed
+  // a logo, but the picked value collapsed back to text. Build a
+  // value→{label,icon} lookup and have `SelectValue`'s function child
+  // render the icon + label together so the selected state matches the
+  // option state.
+  const optionByValue = new Map<T, { label: string; icon: ReactNode | null }>();
+  for (const option of props.options) {
+    const [value, label] = option;
+    optionByValue.set(value, {
+      label,
+      icon: option.length === 3 ? option[2] : null,
+    });
+  }
+  const renderOptionRow = (label: string, icon: ReactNode | null, className = 'maka-plan-select-option') =>
+    icon ? (
+      <span className={className}>
+        <span className="maka-plan-select-option-icon" aria-hidden="true">{icon}</span>
+        <span>{label}</span>
+      </span>
+    ) : (
+      <>{label}</>
+    );
   return (
     <SelectRoot
       value={props.value}
@@ -2017,7 +2041,13 @@ function PlanReminderSelect<T extends string>(props: {
       }}
     >
       <SelectTrigger className="maka-plan-select w-full" aria-label={props.ariaLabel}>
-        <SelectValue />
+        <SelectValue>
+          {(value: T) => {
+            const entry = optionByValue.get(value);
+            if (!entry) return null;
+            return renderOptionRow(entry.label, entry.icon);
+          }}
+        </SelectValue>
       </SelectTrigger>
       <SelectPortal>
         <SelectPositioner alignItemWithTrigger={false} sideOffset={6}>
@@ -2027,14 +2057,7 @@ function PlanReminderSelect<T extends string>(props: {
               const icon = option.length === 3 ? option[2] : null;
               return (
                 <SelectItem key={value} value={value}>
-                  {icon ? (
-                    <span className="maka-plan-select-option">
-                      <span className="maka-plan-select-option-icon" aria-hidden="true">{icon}</span>
-                      <span>{label}</span>
-                    </span>
-                  ) : (
-                    label
-                  )}
+                  {renderOptionRow(label, icon)}
                 </SelectItem>
               );
             })}