fix: legible overlays, stacked room tooltips, whole member names

app/globals.css

@@ -6,15 +6,22 @@
 
 @theme inline {
   --color-background: var(--background);
+  --color-overlay: var(--overlay);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-inter), var(--font-noto-sans-jp), var(--font-noto-sans-tc), sans-serif;
-  --font-mono: var(--font-jetbrains-mono), var(--font-noto-sans-jp), var(--font-noto-sans-tc), monospace;
+  --font-sans:
+    var(--font-inter), var(--font-noto-sans-jp), var(--font-noto-sans-tc),
+    sans-serif;
+  --font-mono:
+    var(--font-jetbrains-mono), var(--font-noto-sans-jp),
+    var(--font-noto-sans-tc), monospace;
   --text-*: initial;
   --text-title: 1.5rem;
   --text-title--line-height: 2rem;
   --text-body: 1rem;
   --text-body--line-height: 1.5rem;
-  --font-heading: var(--font-inter), var(--font-noto-sans-jp), var(--font-noto-sans-tc), sans-serif;
+  --font-heading:
+    var(--font-inter), var(--font-noto-sans-jp), var(--font-noto-sans-tc),
+    sans-serif;
   --color-success: var(--success);
   --color-warning: var(--warning);
   --radius-control: var(--radius);
@@ -44,6 +51,7 @@
 :root {
   --radius: 1rem;
   --background: oklch(1 0 0);
+  --overlay: oklch(1 0 0 / 85%);
   --foreground: oklch(0.145 0 0);
   --primary: oklch(0.378 0.182 262.5);
   --primary-foreground: oklch(0.985 0 0);
@@ -59,6 +67,7 @@
 
 .dark {
   --background: oklch(0.145 0 0);
+  --overlay: oklch(0.145 0 0 / 85%);
   --foreground: oklch(0.985 0 0);
   --primary: oklch(0.68 0.168 262.5);
   --primary-foreground: oklch(0.145 0 0);
@@ -85,29 +94,81 @@
 }
 
 @utility w-menu {
-    width: calc(var(--anchor-width) + 0.5rem);
+  width: calc(var(--anchor-width) + 0.5rem);
 }
 
 @utility duration-state {
-    --tw-duration: 150ms;
-    transition-duration: 150ms;
-    --tw-ease: cubic-bezier(0, 0, 0.2, 1);
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  --tw-duration: 150ms;
+  transition-duration: 150ms;
+  --tw-ease: cubic-bezier(0, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
 @utility duration-overlay {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    --tw-ease: cubic-bezier(0, 0, 0.2, 1);
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+  --tw-ease: cubic-bezier(0, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
 /* The page's one focus moves on a spring: 500ms, overshooting 10%. */
 @utility duration-spring {
   --tw-duration: 500ms;
   transition-duration: 500ms;
-  --tw-ease: linear(0, 0.04, 0.142, 0.278, 0.429, 0.578, 0.715, 0.833, 0.928, 1.001, 1.051, 1.083, 1.099, 1.103, 1.097, 1.086, 1.072, 1.056, 1.041, 1.027, 1.016, 1.006, 0.999, 0.994, 1);
-  transition-timing-function: linear(0, 0.04, 0.142, 0.278, 0.429, 0.578, 0.715, 0.833, 0.928, 1.001, 1.051, 1.083, 1.099, 1.103, 1.097, 1.086, 1.072, 1.056, 1.041, 1.027, 1.016, 1.006, 0.999, 0.994, 1);
+  --tw-ease: linear(
+    0,
+    0.04,
+    0.142,
+    0.278,
+    0.429,
+    0.578,
+    0.715,
+    0.833,
+    0.928,
+    1.001,
+    1.051,
+    1.083,
+    1.099,
+    1.103,
+    1.097,
+    1.086,
+    1.072,
+    1.056,
+    1.041,
+    1.027,
+    1.016,
+    1.006,
+    0.999,
+    0.994,
+    1
+  );
+  transition-timing-function: linear(
+    0,
+    0.04,
+    0.142,
+    0.278,
+    0.429,
+    0.578,
+    0.715,
+    0.833,
+    0.928,
+    1.001,
+    1.051,
+    1.083,
+    1.099,
+    1.103,
+    1.097,
+    1.086,
+    1.072,
+    1.056,
+    1.041,
+    1.027,
+    1.016,
+    1.006,
+    0.999,
+    0.994,
+    1
+  );
 }
 
 /* Arriving on the page: the focus rises on the spring, a list's rows
@@ -126,7 +187,35 @@
 }
 
 @utility animate-rise {
-  animation: rise 500ms linear(0, 0.04, 0.142, 0.278, 0.429, 0.578, 0.715, 0.833, 0.928, 1.001, 1.051, 1.083, 1.099, 1.103, 1.097, 1.086, 1.072, 1.056, 1.041, 1.027, 1.016, 1.006, 0.999, 0.994, 1) both;
+  animation: rise 500ms
+    linear(
+      0,
+      0.04,
+      0.142,
+      0.278,
+      0.429,
+      0.578,
+      0.715,
+      0.833,
+      0.928,
+      1.001,
+      1.051,
+      1.083,
+      1.099,
+      1.103,
+      1.097,
+      1.086,
+      1.072,
+      1.056,
+      1.041,
+      1.027,
+      1.016,
+      1.006,
+      0.999,
+      0.994,
+      1
+    )
+    both;
 }
 
 @utility stagger-rise {
@@ -161,7 +250,34 @@
 
 /* A number-ticker digit column; data-digit picks the row. */
 @utility digit-roll {
-  transition: translate 500ms linear(0, 0.04, 0.142, 0.278, 0.429, 0.578, 0.715, 0.833, 0.928, 1.001, 1.051, 1.083, 1.099, 1.103, 1.097, 1.086, 1.072, 1.056, 1.041, 1.027, 1.016, 1.006, 0.999, 0.994, 1);
+  transition: translate 500ms
+    linear(
+      0,
+      0.04,
+      0.142,
+      0.278,
+      0.429,
+      0.578,
+      0.715,
+      0.833,
+      0.928,
+      1.001,
+      1.051,
+      1.083,
+      1.099,
+      1.103,
+      1.097,
+      1.086,
+      1.072,
+      1.056,
+      1.041,
+      1.027,
+      1.016,
+      1.006,
+      0.999,
+      0.994,
+      1
+    );
   &[data-digit="1"] {
     translate: 0 -10%;
   }
@@ -191,18 +307,21 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  *, ::before, ::after {
+  *,
+  ::before,
+  ::after {
     --tw-enter-scale: 1 !important;
     --tw-exit-scale: 1 !important;
     --tw-enter-translate-x: 0 !important;
     --tw-enter-translate-y: 0 !important;
     --tw-exit-translate-x: 0 !important;
     --tw-exit-translate-y: 0 !important;
   }
-  .animate-rise, .stagger-rise > * {
+  .animate-rise,
+  .stagger-rise > * {
     animation-name: appear;
   }
   .digit-roll {
     transition: none;
   }
-}
+}

app/rooms/meeting-fields.tsx

@@ -190,6 +190,7 @@ export function MeetingFields({
         </Label>
         <MemberCombobox
           id="meeting-attendees"
+          className="w-full"
           multiple
           members={members}
           value={value.attendees}
@@ -249,10 +250,6 @@ export function MeetingFields({
           onChange={(event) => set({ agenda: event.target.value })}
         />
       </FormField>
-      <p className="text-muted-foreground">
-        會在 WinLab 的 Teams 頻道開會議，自動錄影並產生逐字稿與 AI
-        摘要，頻道成員都看得到。
-      </p>
     </>
   )
 }

components/member-combobox.tsx

@@ -97,7 +97,7 @@ function MemberCombobox({
                   data-checked={chosen.includes(member.id)}
                   onSelect={() => pick(member.id)}
                 >
-                  <span className="truncate">{member.name}</span>
+                  <span className="shrink-0">{member.name}</span>
                   <span className="truncate text-muted-foreground">
                     {member.email}
                   </span>

components/ui/alert-dialog.tsx

@@ -49,7 +49,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Popup
         data-slot="alert-dialog-content"
         className={cn(
-          "fixed inset-x-4 top-1/2 z-50 mx-auto flex max-w-md -translate-y-1/2 flex-col gap-6 rounded-surface border border-border bg-transparent p-6 text-body text-foreground shadow-lg backdrop-blur-md duration-overlay outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed inset-x-4 top-1/2 z-50 mx-auto flex max-w-md -translate-y-1/2 flex-col gap-6 rounded-surface border border-border bg-overlay p-6 text-body text-foreground shadow-lg backdrop-blur-md duration-overlay outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

components/ui/dialog.tsx

@@ -42,7 +42,7 @@ function DialogOverlay({
 
 // Two widths replace the per-page pixel width overrides apps used before.
 const dialogContentVariants = cva(
-  "fixed inset-x-4 top-1/2 z-50 mx-auto flex max-h-11/12 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-surface border border-border bg-transparent p-6 text-body text-foreground shadow-lg backdrop-blur-md duration-overlay outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+  "fixed inset-x-4 top-1/2 z-50 mx-auto flex max-h-11/12 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-surface border border-border bg-overlay p-6 text-body text-foreground shadow-lg backdrop-blur-md duration-overlay outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
   {
     variants: {
       size: {

components/ui/popover.tsx

@@ -38,7 +38,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col rounded-menu border border-border bg-transparent p-1 text-body text-foreground shadow-md outline-hidden backdrop-blur-md duration-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex w-72 origin-(--transform-origin) flex-col rounded-menu border border-border bg-overlay p-1 text-body text-foreground shadow-md outline-hidden backdrop-blur-md duration-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

components/ui/select.tsx

@@ -42,9 +42,12 @@ function SelectTrigger({
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon
-        render={<ChevronDownIcon className="text-muted-foreground" />}
-      />
+      {/* Icon's default content is the text "▼"; passing the svg as children
+          replaces it, while render would keep "▼" inside the svg and in the
+          trigger's text. */}
+      <SelectPrimitive.Icon className="flex text-muted-foreground">
+        <ChevronDownIcon />
+      </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
 }
@@ -77,7 +80,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "relative isolate z-50 max-h-(--available-height) w-menu min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-menu border border-border bg-transparent text-foreground shadow-md backdrop-blur-md duration-overlay data-[align-trigger=true]:zoom-in-100 data-[align-trigger=true]:zoom-out-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "relative isolate z-50 max-h-(--available-height) w-menu min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-menu border border-border bg-overlay text-foreground shadow-md backdrop-blur-md duration-overlay data-[align-trigger=true]:zoom-in-100 data-[align-trigger=true]:zoom-out-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

components/ui/sonner.tsx

@@ -28,7 +28,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
         unstyled: true,
         classNames: {
           toast:
-            "flex w-full items-center gap-3 rounded-surface border border-border bg-transparent p-6 text-body text-foreground shadow-lg backdrop-blur-md",
+            "flex w-full items-center gap-3 rounded-surface border border-border bg-overlay p-6 text-body text-foreground shadow-lg backdrop-blur-md",
           icon: "flex size-6 shrink-0 items-center justify-center self-start",
           content: "flex flex-1 flex-col",
           title: "font-medium",

components/ui/tooltip.tsx

@@ -50,7 +50,7 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center rounded-control bg-foreground px-3 py-2 text-body text-background duration-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex w-fit max-w-xs origin-(--transform-origin) flex-col items-start gap-1 rounded-control bg-foreground px-3 py-2 text-body text-background duration-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}