fix(plex): the player's settings panel is a tab list with named, touch-sized rows

- Its section switch is `ui/Tabs` (new `tone="media"` paint for the dark chrome) with a wired
  tabpanel; the panel opens with the focus on the selected tab.
- On/off rows are `CheckRow` (the whole row, 44 on touch), the "no background" checkbox too.
- Every slider and the four colour wells carry the name their row shows.
- The clock's date-style buttons reach the touch target.

frontend/src/components/plexPlayerControls.tsx

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { RotateCcw } from "lucide-react";
 import { IconButton } from "./ui/IconButton";
-import { Slider as Range, Checkbox } from "./ui/NativeControls";
+import { Slider as Range, CheckRow } from "./ui/NativeControls";
 
 // --- settings-panel building blocks ------------------------------------------------------------
 export function PanelHead({ children }: { children: ReactNode }) {
@@ -51,7 +51,14 @@ export function Slider({
           )}
         </span>
       </div>
-      <Range min={min} max={max} step={step} value={value} onChange={(v) => onChange(v)} />
+      <Range
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        aria-label={label}
+        onChange={(v) => onChange(v)}
+      />
     </div>
   );
 }
@@ -64,11 +71,15 @@ export function Toggle({
   checked: boolean;
   onChange: (v: boolean) => void;
 }) {
+  // The whole row toggles and grows to 44 on touch (CheckRow); the box sits at the row's end.
   return (
-    <label className="flex cursor-pointer items-center justify-between px-1 py-1.5">
-      <span className="text-[0.75rem] text-white/80">{label}</span>
-      <Checkbox checked={checked} onChange={onChange} />
-    </label>
+    <CheckRow
+      checked={checked}
+      onChange={onChange}
+      className="w-full flex-row-reverse justify-between px-1 py-1.5 text-[0.75rem] text-white/80"
+    >
+      {label}
+    </CheckRow>
   );
 }