fix(webapp): widen the theme select and correct the tooltip arrow

The trigger is now sized to the widest option, and its icon can no longer
shrink - at the old width "System" and "Classic" squeezed it down to a sliver.
The popover matches that width.

The contrast label's arrow had its borders on the two left-hand edges rather
than the two facing the handle; rotating a square clockwise sends the bottom
and right edges downward, not the bottom and left.

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

Author: samejr

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

@@ -127,7 +127,7 @@ export function Slider({
               {valueTooltip(currentValue)}
               {/* Straddles the bottom edge, hiding the border it overlaps, so the
                   two outer sides read as an arrow pointing at the handle. */}
-              <span className="absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-l border-grid-bright bg-background-bright" />
+              <span className="absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-grid-bright bg-background-bright" />
             </span>
           )}
         </RadixSlider.Thumb>

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

@@ -48,7 +48,9 @@ const DEFAULT_CONTRAST_MARK = 20;
 
 function themeIcon(value: ThemePreference) {
   const Icon = THEME_OPTIONS_BY_VALUE[value].icon;
-  return <Icon className="size-4 text-text-bright" />;
+  // shrink-0: without it the icon is the flex item that gives way to a long
+  // label, and "System"/"Classic" squash it to a sliver.
+  return <Icon className="size-4 shrink-0 text-text-bright" />;
 }
 
 function createSchema(
@@ -309,10 +311,12 @@ export default function Page() {
                           {THEME_OPTIONS_BY_VALUE[value].label}
                         </span>
                       )}
-                      className="w-22"
+                      // Sized to the widest option (Classic, 106px) so no label
+                      // squeezes its icon, rounded up to the nearest step.
+                      className="w-27"
                       // The popover's 180px floor left a gap past the longest
-                      // label; track the trigger's width instead.
-                      popoverClassName="min-w-22"
+                      // label; match the trigger instead.
+                      popoverClassName="min-w-27"
                     >
                       {(items) =>
                         items.map((item) => (