fix(webapp): stop the contrast label sticking, tighten the theme picker

The value label above the contrast handle is now purely hover-driven: it was
also keyed off focus, which the thumb keeps after a click, leaving the label
stuck on once clicked. The handle itself grows from 12px to 18px.

Also halves the profile page theme picker and its popover, which was held open
by a 180px floor, brightens its icons and labels, and widens the Appearance
submenu to 144px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/navigation/AppearanceMenuItem.tsx

@@ -35,8 +35,8 @@ export function AppearanceMenuItem() {
       : rootData.themePreference;
 
   return (
-    // Half the standard submenu width: three short labels don't need the room.
-    <SideMenuPopoverSubMenu title="Appearance" icon={ToggleSwitchIcon} contentClassName="min-w-32">
+    // Much narrower than the standard submenu: these labels don't need the room.
+    <SideMenuPopoverSubMenu title="Appearance" icon={ToggleSwitchIcon} contentClassName="min-w-36">
       <div className="flex flex-col gap-1 p-1">
         {THEME_OPTIONS.map((option) => (
           <PopoverMenuItem

apps/webapp/app/components/primitives/Slider.tsx

@@ -12,10 +12,10 @@ const variants = {
     root: "h-4 grow",
     track: "h-1 bg-grid-bright",
     range: "bg-transparent",
-    // Matches the Switch thumb; the secondary-button hairline+shadow keeps the
-    // white dot visible on the light track
+    // The secondary-button hairline+shadow keeps the white dot visible on the
+    // light track
     thumb:
-      "h-3 w-3 border border-border-bright bg-white shadow-sm dark:border-transparent dark:bg-charcoal-200 dark:shadow-none",
+      "h-4.5 w-4.5 border border-border-bright bg-white shadow-sm dark:border-transparent dark:bg-charcoal-200 dark:shadow-none",
   },
   tertiary: {
     container: "h-6 gap-1 rounded-sm hover:bg-background-raised px-1",
@@ -35,9 +35,9 @@ export type SliderProps = ComponentProps<typeof RadixSlider.Root> & {
   TrailingIcon?: RenderIcon;
   variant: VariantName;
   /**
-   * Opts into a small label above the thumb showing the formatted value, while
-   * hovering, dragging, or focused via the keyboard. It sits inside the thumb,
-   * so it tracks the handle exactly. Reads the controlled `value`, so pass one.
+   * Opts into a small label above the thumb showing the formatted value, shown
+   * while the thumb is hovered or being dragged. It sits inside the thumb, so it
+   * tracks the handle exactly. Reads the controlled `value`, so pass one.
    */
   valueTooltip?: (value: number) => string;
 };
@@ -95,9 +95,9 @@ export function Slider({
             <span
               className={cn(
                 "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded border border-grid-bright bg-background-bright px-1.5 py-0.5 text-xs tabular-nums text-text-bright shadow-md transition-opacity",
-                isDragging
-                  ? "opacity-100"
-                  : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"
+                // Deliberately not keyed off focus: the thumb keeps focus after a
+                // click, which would leave the label stuck on.
+                isDragging ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100"
               )}
             >
               {valueTooltip(currentValue)}

apps/webapp/app/routes/account._index/route.tsx

@@ -44,7 +44,7 @@ export const meta = pageMeta("Your profile");
 
 function themeIcon(value: ThemePreference) {
   const Icon = THEME_OPTIONS_BY_VALUE[value].icon;
-  return <Icon className="size-4 text-text-dimmed" />;
+  return <Icon className="size-4 text-text-bright" />;
 }
 
 function createSchema(
@@ -305,11 +305,19 @@ export default function Page() {
                           {THEME_OPTIONS_BY_VALUE[value].label}
                         </span>
                       )}
-                      className="w-44"
+                      className="w-22"
+                      // The popover's 180px floor left a gap past the longest
+                      // label; track the trigger's width instead.
+                      popoverClassName="min-w-22"
                     >
                       {(items) =>
                         items.map((item) => (
-                          <SelectItem key={item} value={item} icon={themeIcon(item)}>
+                          <SelectItem
+                            key={item}
+                            value={item}
+                            icon={themeIcon(item)}
+                            className="text-text-bright"
+                          >
                             {THEME_OPTIONS_BY_VALUE[item].label}
                           </SelectItem>
                         ))