From be443734992cce31b5b786d5e3db7d60a8054883 Mon Sep 17 00:00:00 2001
From: KyleTryon <git@techsquidtv.com>
Date: Wed, 9 Sep 2026 15:52:10 -0400
Subject: [PATCH 1/5] feat(frontend): improve mobile editor layout and controls

---
 .../src/components/editor/EditorControls.tsx  | 132 ++++++++----
 .../editor/EditorEditableTimecode.tsx         |  92 +++++----
 .../components/editor/EditorEditingTools.tsx  | 191 ++++++++++++++++--
 .../src/components/editor/EditorLayout.tsx    |  63 +++---
 .../editor/EditorPlaybackSourcePanel.tsx      |  91 +++------
 .../editor/EditorPreviewTimecode.tsx          |   9 +-
 .../src/components/editor/EditorScreen.tsx    |  66 +++---
 .../src/components/editor/EditorTimeline.tsx  | 103 +++++++---
 .../src/components/frontendWorkflow.test.ts   |  17 +-
 .../src/components/ui/scroll-area.tsx         |  14 ++
 10 files changed, 510 insertions(+), 268 deletions(-)

diff --git a/apps/frontend/src/components/editor/EditorControls.tsx b/apps/frontend/src/components/editor/EditorControls.tsx
index c5a928a5..e9eecb7a 100644
--- a/apps/frontend/src/components/editor/EditorControls.tsx
+++ b/apps/frontend/src/components/editor/EditorControls.tsx
@@ -1,4 +1,9 @@
-import { useMemo, type CSSProperties, type ReactElement } from "react";
+import {
+  useMemo,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import {
   Camera,
   Pause,
@@ -24,6 +29,7 @@ import {
   DrawerTrigger,
 } from "@/components/ui/drawer";
 import { EditorEditableTimecode } from "@/components/editor/EditorEditableTimecode";
+import { handleHorizontalScrollKeyDown } from "@/components/ui/scroll-area";
 import { EditorPreviewTimecode } from "@/components/editor/EditorPreviewTimecode";
 import {
   formatTime,
@@ -34,6 +40,7 @@ type EditorControlsVariant = "desktop" | "mobile";
 
 interface EditorControlsProperties {
   variant?: EditorControlsVariant;
+  playbackSourcePanel: ReactNode;
   playing: boolean;
   loadingPreview: boolean;
   togglePlay: () => void;
@@ -87,6 +94,7 @@ function ControlTooltip({
 
 export function EditorControls({
   variant = "desktop",
+  playbackSourcePanel,
   playing,
   loadingPreview,
   togglePlay,
@@ -131,6 +139,9 @@ export function EditorControls({
     }),
     [duration],
   );
+  const mobileClipMetricStyle: CSSProperties = {
+    minWidth: `max(8rem, ${formatTimecodeInput(duration).length + 2}ch)`,
+  };
   const volumeRangeFillPercent = `${
     Math.min(Math.max(muted ? 0 : volume, 0), 1) * 100
   }%`;
@@ -170,6 +181,11 @@ export function EditorControls({
     >
       <EditorPreviewTimecode
         ariaHidden
+        className={
+          variant === "mobile"
+            ? "text-[clamp(0.6875rem,6cqi,0.875rem)]"
+            : undefined
+        }
         currentTime={currentTime}
         duration={duration}
       />
@@ -277,7 +293,7 @@ export function EditorControls({
           className={rangeActionButtonClassName}
           aria-label="Set in point at the playhead"
         >
-          In
+          Set in
         </button>
       </ControlTooltip>
       <ControlTooltip
@@ -291,7 +307,7 @@ export function EditorControls({
           className={`${rangeActionButtonClassName} border-l border-editor-border`}
           aria-label="Set out point at the playhead"
         >
-          Out
+          Set out
         </button>
       </ControlTooltip>
       <ControlTooltip
@@ -313,45 +329,72 @@ export function EditorControls({
   );
   const editableClipMetrics = (
     <>
-      {clipMetrics.map((metric) => (
-        <div
-          key={metric.label}
-          className={
-            variant === "mobile"
-              ? "flex min-w-0 flex-col rounded-[var(--radius-control)] border border-editor-border bg-editor-control p-2"
-              : "flex items-center gap-2"
-          }
-        >
-          <span className="text-ui-label font-semibold uppercase tracking-[var(--tracking-caps-lg)] text-muted-foreground">
+      {clipMetrics.map((metric) => {
+        const label = (
+          <span className="font-sans text-ui-label font-semibold uppercase tracking-[var(--tracking-caps-lg)] text-muted-foreground">
             {metric.label}
           </span>
-          {metric.onCommit ? (
-            <EditorEditableTimecode
-              ariaLabel={`${metric.label} time`}
-              buttonClassName="w-full justify-end rounded-[var(--radius-control)] px-1 font-mono text-sm font-semibold tabular-nums text-muted-foreground hover:bg-editor-control-hover hover:text-foreground focus-visible:ring-editor-accent/35"
-              className="justify-end"
-              disabled={!canEditClipTimecode}
-              inputClassName="text-right"
-              onCommit={metric.onCommit}
-              style={clipMetricTimeStyle}
-              value={metric.value}
-            >
-              <span className="block w-full text-right">
+        );
+        return (
+          <div
+            key={metric.label}
+            className={
+              variant === "mobile"
+                ? "flex h-11 flex-1 items-center justify-center gap-2 whitespace-nowrap border-r border-editor-border px-2 font-mono last:border-r-0"
+                : "flex items-center gap-2"
+            }
+            style={variant === "mobile" ? mobileClipMetricStyle : undefined}
+          >
+            {(variant === "desktop" || !metric.onCommit) && label}
+            {metric.onCommit ? (
+              <EditorEditableTimecode
+                ariaLabel={`${metric.label} time`}
+                buttonClassName={
+                  variant === "mobile"
+                    ? "h-11 w-full justify-center gap-2 rounded-[var(--radius-control)] text-foreground hover:bg-editor-control-hover"
+                    : "w-full justify-end rounded-[var(--radius-control)] px-1 font-mono text-sm font-semibold tabular-nums text-muted-foreground hover:bg-editor-control-hover hover:text-foreground focus-visible:ring-editor-accent/35"
+                }
+                className={
+                  variant === "mobile"
+                    ? "min-h-11 w-full items-center"
+                    : "justify-end"
+                }
+                disabled={!canEditClipTimecode}
+                inputClassName={
+                  variant === "mobile"
+                    ? "h-11 text-base text-right"
+                    : "text-right"
+                }
+                onCommit={metric.onCommit}
+                style={variant === "desktop" ? clipMetricTimeStyle : undefined}
+                value={metric.value}
+              >
+                {variant === "mobile" && label}
+                <span
+                  className={
+                    variant === "mobile"
+                      ? "font-mono text-sm font-semibold tabular-nums"
+                      : "block w-full text-right"
+                  }
+                >
+                  {formatTime(metric.value)}
+                </span>
+              </EditorEditableTimecode>
+            ) : (
+              <span
+                className={`inline-block text-right font-mono text-sm font-semibold tabular-nums ${
+                  metric.emphasized
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }`}
+                style={variant === "desktop" ? clipMetricTimeStyle : undefined}
+              >
                 {formatTime(metric.value)}
               </span>
-            </EditorEditableTimecode>
-          ) : (
-            <span
-              className={`inline-block text-right font-mono text-sm font-semibold tabular-nums ${
-                metric.emphasized ? "text-foreground" : "text-muted-foreground"
-              }`}
-              style={clipMetricTimeStyle}
-            >
-              {formatTime(metric.value)}
-            </span>
-          )}
-        </div>
-      ))}
+            )}
+          </div>
+        );
+      })}
     </>
   );
 
@@ -360,7 +403,7 @@ export function EditorControls({
       <div className="border-b border-editor-border bg-editor-panel px-3 py-2">
         <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2">
           <div className="[&_button]:h-10 [&_button]:w-10">{playControl}</div>
-          <div className="min-w-0 text-center text-sm font-medium">
+          <div className="@container min-w-0 text-center text-sm font-medium">
             {previewTimeControl}
           </div>
           <Drawer>
@@ -381,6 +424,7 @@ export function EditorControls({
                 </DrawerDescription>
               </DrawerHeader>
               <div className="cliparr-editor-scrollbar min-h-0 overflow-y-auto px-3 pb-4">
+                <div className="pt-3">{playbackSourcePanel}</div>
                 <section className="border-b border-editor-border py-3">
                   <div className="mb-2 text-ui-micro font-semibold uppercase tracking-[var(--tracking-caps-md)] text-muted-foreground">
                     Playback
@@ -413,8 +457,14 @@ export function EditorControls({
             </DrawerContent>
           </Drawer>
         </div>
-        <div className="mt-2 grid grid-cols-3 gap-1.5 [&_button]:min-h-11 [&_input]:min-h-11 [&_span.font-mono]:min-h-11 [&_span.font-mono]:content-center">
-          {editableClipMetrics}
+        <div
+          className="cliparr-editor-scrollbar mt-2 overflow-x-auto overscroll-x-contain border-y border-editor-border"
+          role="region"
+          aria-label="Clip in, out, and duration"
+          tabIndex={0}
+          onKeyDown={handleHorizontalScrollKeyDown}
+        >
+          <div className="flex w-max min-w-full">{editableClipMetrics}</div>
         </div>
         <div className="mt-2 flex items-center justify-between gap-2 [&_button]:min-h-11">
           {rangeActions}
diff --git a/apps/frontend/src/components/editor/EditorEditableTimecode.tsx b/apps/frontend/src/components/editor/EditorEditableTimecode.tsx
index fb373e2b..2aa3136f 100644
--- a/apps/frontend/src/components/editor/EditorEditableTimecode.tsx
+++ b/apps/frontend/src/components/editor/EditorEditableTimecode.tsx
@@ -12,6 +12,8 @@ import {
   formatTimecodeInput,
   parseTimecodeInput,
 } from "@/components/editor/editorUtilities";
+import { cn } from "@/lib/utilities";
+import { Popover } from "radix-ui";
 
 interface EditorEditableTimecodeProperties {
   ariaLabel: string;
@@ -139,30 +141,52 @@ export function EditorEditableTimecode({
       }}
     >
       {editing ? (
-        <input
-          ref={inputReference}
-          aria-describedby={describedBy}
-          aria-errormessage={invalid ? errorId : undefined}
-          aria-invalid={invalid || undefined}
-          aria-label={`Edit ${ariaLabel}`}
-          autoComplete="off"
-          className={`h-7 border bg-editor-control px-1.5 font-mono text-sm font-semibold text-foreground outline-none transition-colors focus:ring-2 ${
-            invalid
-              ? "border-destructive focus:border-destructive focus:ring-destructive/20"
-              : "border-editor-border focus:border-editor-accent focus:ring-editor-accent/35"
-          } ${inputClassName}`}
-          inputMode="text"
-          onBlur={() => commitDraft({ restoreFocus: false })}
-          onChange={(event) => {
-            setDraftValue(event.target.value);
-            setInvalid(false);
-          }}
-          onKeyDown={handleInputKeyDown}
-          spellCheck={false}
-          style={{ width: inputWidth ?? "100%" }}
-          type="text"
-          value={draftValue}
-        />
+        <Popover.Root open={invalid}>
+          <Popover.Anchor asChild>
+            <input
+              ref={inputReference}
+              aria-describedby={describedBy}
+              aria-errormessage={invalid ? errorId : undefined}
+              aria-invalid={invalid || undefined}
+              aria-label={`Edit ${ariaLabel}`}
+              autoComplete="off"
+              className={cn(
+                "h-7 border bg-editor-control px-1.5 font-mono text-sm font-semibold text-foreground outline-none transition-colors focus:ring-2",
+                invalid
+                  ? "border-destructive focus:border-destructive focus:ring-destructive/20"
+                  : "border-editor-border focus:border-editor-accent focus:ring-editor-accent/35",
+                inputClassName,
+              )}
+              inputMode="text"
+              onBlur={() => commitDraft({ restoreFocus: false })}
+              onChange={(event) => {
+                setDraftValue(event.target.value);
+                setInvalid(false);
+              }}
+              onKeyDown={handleInputKeyDown}
+              spellCheck={false}
+              style={{ width: inputWidth ?? "100%" }}
+              type="text"
+              value={draftValue}
+            />
+          </Popover.Anchor>
+          <Popover.Portal>
+            <Popover.Content
+              id={errorId}
+              role="alert"
+              side="bottom"
+              align="start"
+              sideOffset={4}
+              collisionPadding={8}
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="z-[60] w-52 max-w-[70vw] rounded-md border border-destructive bg-popover p-2 text-xs font-normal text-popover-foreground shadow-md"
+            >
+              Enter seconds (12.5), m:ss (1:23), or h:mm:ss (1:02:03). Press
+              Escape to discard this edit.
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       ) : (
         <button
           ref={buttonReference}
@@ -180,22 +204,10 @@ export function EditorEditableTimecode({
         </button>
       )}
       {editing && (
-        <>
-          <span id={hintId} className="sr-only">
-            Enter seconds, minutes and seconds, or hours minutes and seconds.
-            Press Enter to apply or Escape to cancel.
-          </span>
-          {invalid && (
-            <span
-              id={errorId}
-              className="absolute top-full left-0 z-50 mt-1 w-52 max-w-[70vw] rounded-md border border-destructive bg-popover p-2 text-xs font-normal text-popover-foreground shadow-md"
-              role="alert"
-            >
-              Enter seconds (12.5), m:ss (1:23), or h:mm:ss (1:02:03). Press
-              Escape to discard this edit.
-            </span>
-          )}
-        </>
+        <span id={hintId} className="sr-only">
+          Enter seconds, minutes and seconds, or hours minutes and seconds.
+          Press Enter to apply or Escape to cancel.
+        </span>
       )}
     </span>
   );
diff --git a/apps/frontend/src/components/editor/EditorEditingTools.tsx b/apps/frontend/src/components/editor/EditorEditingTools.tsx
index 8a190abb..1db9ef32 100644
--- a/apps/frontend/src/components/editor/EditorEditingTools.tsx
+++ b/apps/frontend/src/components/editor/EditorEditingTools.tsx
@@ -1,8 +1,33 @@
-import { useState } from "react";
-import { Keyboard, Redo2, Undo2 } from "lucide-react";
+import { useRef, useState } from "react";
+import {
+  Keyboard,
+  MoreHorizontal,
+  Redo2,
+  RotateCcw,
+  Undo2,
+} from "lucide-react";
 import { DialogWindow } from "@/components/ui/dialog";
-import { compactSecondaryButtonClasses } from "@/components/ui/control-styles";
+import {
+  compactSecondaryButtonClasses,
+  iconButtonClasses,
+  primaryButtonClasses,
+  secondaryButtonClasses,
+} from "@/components/ui/control-styles";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { useEditorHistory } from "@/components/editor/useEditorHistory";
+import type { EditorLayoutVariant } from "@/components/editor/EditorLayout";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
 
 const shortcuts = [
   ["Play / pause", "Space"],
@@ -18,35 +43,171 @@ const shortcuts = [
 
 export function EditorEditingTools({
   history,
+  variant,
+  onResetDraft,
+  resetDisabled,
+  draftNotice,
 }: {
   history: ReturnType<typeof useEditorHistory>;
+  variant: EditorLayoutVariant;
+  onResetDraft: () => void;
+  resetDisabled: boolean;
+  draftNotice: string | null;
 }) {
   const [helpOpen, setHelpOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [resetOpen, setResetOpen] = useState(false);
+  const cancelResetReference = useRef<HTMLButtonElement>(null);
+  const menuTriggerReference = useRef<HTMLButtonElement>(null);
+  const mobile = variant === "mobile";
+  const historyButtonClassName = `${compactSecondaryButtonClasses} ${mobile ? "min-h-11 w-11 p-0" : ""}`;
+  const shortcutsButton = (
+    <button
+      type="button"
+      onClick={() => {
+        setMenuOpen(false);
+        setHelpOpen(true);
+      }}
+      className={`${compactSecondaryButtonClasses} ${mobile ? "m-3 min-h-11" : "ml-auto"}`}
+    >
+      <Keyboard className="h-4 w-4" /> Shortcuts
+    </button>
+  );
+  const resetButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label="Reset draft"
+          disabled={resetDisabled}
+          className={
+            mobile
+              ? `${compactSecondaryButtonClasses} mx-3 mb-3 min-h-11`
+              : `${iconButtonClasses} disabled:cursor-not-allowed disabled:opacity-60`
+          }
+          onClick={() => {
+            setMenuOpen(false);
+            setResetOpen(true);
+          }}
+        >
+          <RotateCcw className="h-4 w-4" />
+          {mobile && "Reset draft"}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>Reset draft</TooltipContent>
+    </Tooltip>
+  );
+  const resetDescription =
+    "This removes the saved clip range and subtitle edits from this device. Your original video is unchanged.";
+  const resetActions = (
+    <div className="flex justify-end gap-2 border-t border-border p-4">
+      <button
+        ref={cancelResetReference}
+        type="button"
+        className={`${secondaryButtonClasses} ${mobile ? "min-h-11" : ""}`}
+        onClick={() => setResetOpen(false)}
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        disabled={resetDisabled}
+        className={`${primaryButtonClasses} ${mobile ? "min-h-11" : ""}`}
+        onClick={() => {
+          setResetOpen(false);
+          onResetDraft();
+        }}
+      >
+        Reset draft
+      </button>
+    </div>
+  );
   return (
-    <div className="flex flex-wrap items-center gap-2 border-b border-editor-border bg-editor-panel px-3 py-2">
+    <div
+      className={`flex flex-wrap items-center gap-2 border-b border-editor-border bg-editor-panel px-3 ${mobile ? "py-1" : "py-2"}`}
+    >
       <button
         type="button"
         onClick={history.undo}
         disabled={!history.canUndo}
-        className={compactSecondaryButtonClasses}
+        aria-label="Undo"
+        className={historyButtonClassName}
       >
-        <Undo2 className="h-4 w-4" /> Undo
+        <Undo2 className="h-4 w-4" /> {!mobile && "Undo"}
       </button>
       <button
         type="button"
         onClick={history.redo}
         disabled={!history.canRedo}
-        className={compactSecondaryButtonClasses}
-      >
-        <Redo2 className="h-4 w-4" /> Redo
-      </button>
-      <button
-        type="button"
-        onClick={() => setHelpOpen(true)}
-        className={`${compactSecondaryButtonClasses} ml-auto`}
+        aria-label="Redo"
+        className={historyButtonClassName}
       >
-        <Keyboard className="h-4 w-4" /> Shortcuts
+        <Redo2 className="h-4 w-4" /> {!mobile && "Redo"}
       </button>
+      <span role="status" className="sr-only">
+        {draftNotice}
+      </span>
+      {mobile ? (
+        <Drawer open={menuOpen} onOpenChange={setMenuOpen}>
+          <DrawerTrigger asChild>
+            <button
+              ref={menuTriggerReference}
+              type="button"
+              aria-label="More editor options"
+              className={`${historyButtonClassName} ml-auto`}
+            >
+              <MoreHorizontal className="h-4 w-4" />
+            </button>
+          </DrawerTrigger>
+          <DrawerContent className="border-editor-border bg-editor-panel">
+            <DrawerHeader>
+              <DrawerTitle>Editor options</DrawerTitle>
+              <DrawerDescription>
+                Manage this device’s draft and view keyboard shortcuts.
+              </DrawerDescription>
+            </DrawerHeader>
+            {shortcutsButton}
+            {resetButton}
+          </DrawerContent>
+        </Drawer>
+      ) : (
+        <>
+          {shortcutsButton}
+          {resetButton}
+        </>
+      )}
+      {mobile ? (
+        <Drawer open={resetOpen} onOpenChange={setResetOpen}>
+          <DrawerContent
+            className="border-editor-border bg-editor-panel"
+            onOpenAutoFocus={(event) => {
+              event.preventDefault();
+              cancelResetReference.current?.focus();
+            }}
+            onCloseAutoFocus={(event) => {
+              event.preventDefault();
+              menuTriggerReference.current?.focus();
+            }}
+          >
+            <DrawerHeader>
+              <DrawerTitle>Reset draft?</DrawerTitle>
+              <DrawerDescription>{resetDescription}</DrawerDescription>
+            </DrawerHeader>
+            {resetActions}
+          </DrawerContent>
+        </Drawer>
+      ) : (
+        <DialogWindow
+          open={resetOpen}
+          onClose={() => setResetOpen(false)}
+          title="Reset draft?"
+          description={resetDescription}
+          closeLabel="Close reset confirmation"
+          initialFocus={cancelResetReference}
+        >
+          {resetActions}
+        </DialogWindow>
+      )}
       <DialogWindow
         open={helpOpen}
         onClose={() => setHelpOpen(false)}
diff --git a/apps/frontend/src/components/editor/EditorLayout.tsx b/apps/frontend/src/components/editor/EditorLayout.tsx
index f7b78fc3..fe76ad08 100644
--- a/apps/frontend/src/components/editor/EditorLayout.tsx
+++ b/apps/frontend/src/components/editor/EditorLayout.tsx
@@ -46,13 +46,20 @@ export function EditorPreviewPane({
     : cliparrMotionTransitions.fast;
   const previewStage = (
     <section
+      data-editor-preview-stage
       className={
         variant === "desktop"
           ? "flex min-h-0 flex-1 items-center justify-center overflow-hidden border border-editor-border bg-editor-monitor p-2"
-          : "flex min-h-editor-preview-min flex-none items-center justify-center overflow-hidden border border-editor-border bg-editor-monitor p-2 sm:min-h-editor-preview-sm-min"
+          : "relative aspect-video min-h-editor-preview-min w-full flex-none overflow-hidden border border-editor-border bg-editor-monitor sm:min-h-editor-preview-sm-min"
       }
     >
-      {children}
+      {variant === "mobile" ? (
+        <div className="absolute inset-2 flex min-h-0 items-center justify-center">
+          {children}
+        </div>
+      ) : (
+        children
+      )}
     </section>
   );
 
@@ -93,11 +100,6 @@ export function EditorTimelinePane({
   hasDuration: boolean;
   timeline: ReactNode;
 }) {
-  const reduceMotion = useReducedMotion();
-  const stateTransition = reduceMotion
-    ? { duration: 0 }
-    : cliparrMotionTransitions.standard;
-
   return (
     <section
       className={
@@ -108,35 +110,29 @@ export function EditorTimelinePane({
     >
       {controls}
 
-      <AnimatePresence mode="popLayout" initial={false}>
-        {hasDuration ? (
-          <motion.div
-            key="editor-timeline-ready"
-            layout={!reduceMotion}
-            className={variant === "desktop" ? "min-h-0 flex-1" : undefined}
-            data-editor-timeline-ready
-            initial={reduceMotion ? { opacity: 1 } : EDITOR_READY_STATE_INITIAL}
-            animate={EDITOR_READY_STATE_VISIBLE}
-            exit={EDITOR_READY_STATE_EXIT}
-            transition={stateTransition}
-          >
-            {timeline}
-          </motion.div>
-        ) : (
-          <motion.div
-            key="editor-waiting-duration"
-            layout={!reduceMotion}
-            className="border-t border-editor-border px-3 py-3 text-sm text-muted-foreground"
+      <div
+        className={
+          variant === "desktop" ? "relative min-h-0 flex-1" : "relative"
+        }
+        aria-busy={!hasDuration}
+      >
+        <div
+          className={`h-full ${hasDuration ? "" : "opacity-40"}`}
+          inert={!hasDuration}
+          data-editor-timeline-ready={hasDuration || undefined}
+        >
+          {timeline}
+        </div>
+        {!hasDuration && (
+          <div
+            className="absolute inset-0 flex items-center justify-center bg-editor-panel/70 px-3 text-center text-sm text-muted-foreground"
+            role="status"
             data-editor-waiting-duration
-            initial={reduceMotion ? { opacity: 1 } : EDITOR_READY_STATE_INITIAL}
-            animate={EDITOR_READY_STATE_VISIBLE}
-            exit={EDITOR_READY_STATE_EXIT}
-            transition={stateTransition}
           >
             Waiting for media duration.
-          </motion.div>
+          </div>
         )}
-      </AnimatePresence>
+      </div>
     </section>
   );
 }
@@ -271,13 +267,11 @@ export function EditorDesktopLayout({
 
 export function EditorMobileLayout({
   error,
-  playbackSourcePanel,
   previewPane,
   timelinePane,
   subtitlePanel,
 }: {
   error: string | null;
-  playbackSourcePanel: ReactNode;
   previewPane: ReactNode;
   timelinePane: ReactNode;
   subtitlePanel: ReactNode;
@@ -290,7 +284,6 @@ export function EditorMobileLayout({
         </div>
       )}
 
-      {playbackSourcePanel}
       {previewPane}
       {timelinePane}
       {subtitlePanel}
diff --git a/apps/frontend/src/components/editor/EditorPlaybackSourcePanel.tsx b/apps/frontend/src/components/editor/EditorPlaybackSourcePanel.tsx
index 6272c083..3be93aea 100644
--- a/apps/frontend/src/components/editor/EditorPlaybackSourcePanel.tsx
+++ b/apps/frontend/src/components/editor/EditorPlaybackSourcePanel.tsx
@@ -1,89 +1,44 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { EditorPropertyRow } from "@/components/editor/EditorPropertyControls";
 import { cn } from "@/lib/utilities";
-import { cliparrMotionTransitions } from "@/lib/motionPresets";
 
 interface EditorPlaybackSourcePanelProperties {
   previewSourceLabel: string;
   fallbackMessage: string | null;
-  hasHlsSource: boolean;
   className?: string;
 }
 
 function displaySourceLabel(label: string) {
-  if (label === "Direct source") {
-    return "Direct media";
+  switch (label) {
+    case "HLS stream":
+    case "HLS URL": {
+      return "HLS";
+    }
+    case "Direct source": {
+      return "Direct";
+    }
+    default: {
+      return label.trim() || "Resolving stream";
+    }
   }
-
-  if (!label.trim()) {
-    return "Resolving stream";
-  }
-
-  return label;
 }
 
-const SOURCE_NOTE_INITIAL = {
-  opacity: 0,
-  y: 4,
-  filter: "blur(6px)",
-};
-const SOURCE_NOTE_VISIBLE = {
-  opacity: 1,
-  y: 0,
-  filter: "blur(0px)",
-};
-const SOURCE_NOTE_EXIT = {
-  opacity: 0,
-  y: -3,
-  filter: "blur(6px)",
-};
-
 export function EditorPlaybackSourcePanel({
   previewSourceLabel,
   fallbackMessage,
-  hasHlsSource,
   className,
 }: EditorPlaybackSourcePanelProperties) {
-  const reduceMotion = useReducedMotion();
-  const transition = reduceMotion
-    ? { duration: 0 }
-    : cliparrMotionTransitions.fast;
-  const sourceNote =
-    fallbackMessage ??
-    (!hasHlsSource && previewSourceLabel === "Direct source"
-      ? "Direct media only."
-      : null);
-
   return (
-    <section className={cn("flex min-h-0 flex-col", className)}>
-      <div className="overflow-hidden border border-editor-border bg-editor-panel-raised">
-        <div className="border-b border-editor-border bg-editor-panel-muted px-3 py-2">
-          <div className="text-ui-micro font-semibold uppercase tracking-[var(--tracking-caps-md)] text-muted-foreground">
-            Preview Source
-          </div>
-        </div>
-
-        <div className="px-3 py-2.5">
-          <div className="text-sm font-medium text-sidebar-foreground">
-            {displaySourceLabel(previewSourceLabel)}
-          </div>
-
-          <AnimatePresence initial={false}>
-            {sourceNote && (
-              <motion.p
-                key={sourceNote}
-                layout={!reduceMotion}
-                className="mt-2.5 border-t border-editor-border pt-2.5 text-xs leading-5 text-muted-foreground"
-                initial={reduceMotion ? { opacity: 1 } : SOURCE_NOTE_INITIAL}
-                animate={SOURCE_NOTE_VISIBLE}
-                exit={SOURCE_NOTE_EXIT}
-                transition={transition}
-              >
-                {sourceNote}
-              </motion.p>
-            )}
-          </AnimatePresence>
-        </div>
-      </div>
+    <section className={cn("min-h-0", className)}>
+      <EditorPropertyRow label="Source">
+        <span className="block text-right text-xs text-muted-foreground">
+          {displaySourceLabel(previewSourceLabel)}
+        </span>
+      </EditorPropertyRow>
+      {fallbackMessage && (
+        <p className="mt-1 text-xs leading-5 text-muted-foreground">
+          {fallbackMessage}
+        </p>
+      )}
     </section>
   );
 }
diff --git a/apps/frontend/src/components/editor/EditorPreviewTimecode.tsx b/apps/frontend/src/components/editor/EditorPreviewTimecode.tsx
index 5e686f7c..74aa02c4 100644
--- a/apps/frontend/src/components/editor/EditorPreviewTimecode.tsx
+++ b/apps/frontend/src/components/editor/EditorPreviewTimecode.tsx
@@ -1,7 +1,9 @@
 import { memo, useLayoutEffect, useMemo, useRef, type RefObject } from "react";
+import { cn } from "@/lib/utilities";
 
 interface EditorPreviewTimecodeProperties {
   ariaHidden?: boolean;
+  className?: string;
   currentTime: number;
   duration: number;
 }
@@ -123,6 +125,7 @@ function arePreviewTimecodePropertiesEqual(
 ) {
   return (
     previous.ariaHidden === next.ariaHidden &&
+    previous.className === next.className &&
     getPreviewCentiseconds(previous.currentTime) ===
       getPreviewCentiseconds(next.currentTime) &&
     getPreviewCentiseconds(previous.duration) ===
@@ -171,6 +174,7 @@ const TimecodeShell = memo(function TimecodeShell({
 
 export const EditorPreviewTimecode = memo(function EditorPreviewTimecode({
   ariaHidden = false,
+  className,
   currentTime,
   duration,
 }: EditorPreviewTimecodeProperties) {
@@ -222,7 +226,10 @@ export const EditorPreviewTimecode = memo(function EditorPreviewTimecode({
     <span
       ref={containerReference}
       aria-hidden={ariaHidden || undefined}
-      className="flex shrink-0 items-center whitespace-nowrap font-mono text-sm font-semibold tabular-nums text-foreground"
+      className={cn(
+        "flex shrink-0 items-center whitespace-nowrap font-mono text-sm font-semibold tabular-nums text-foreground",
+        className,
+      )}
       style={{ contain: "layout style paint" }}
     >
       <span aria-hidden="true" className="inline-flex items-baseline">
diff --git a/apps/frontend/src/components/editor/EditorScreen.tsx b/apps/frontend/src/components/editor/EditorScreen.tsx
index 10acd8a4..a8a3f11b 100644
--- a/apps/frontend/src/components/editor/EditorScreen.tsx
+++ b/apps/frontend/src/components/editor/EditorScreen.tsx
@@ -538,9 +538,18 @@ function EditorScreenContent({
       />
     </EditorPreviewPane>
   );
+  const playbackSourcePanel = (
+    <EditorPlaybackSourcePanel
+      previewSourceLabel={previewSourceLabel}
+      fallbackMessage={playbackFallbackReason}
+      className={isDesktopLayout ? "shrink-0 px-3" : "shrink-0"}
+    />
+  );
+
   const editorControls = (
     <EditorControls
       variant={layoutVariant}
+      playbackSourcePanel={playbackSourcePanel}
       playing={playing}
       loadingPreview={loadingPreview}
       togglePlay={togglePlay}
@@ -567,9 +576,14 @@ function EditorScreenContent({
       onClearPoints={handleClearInOutPoints}
     />
   );
-  const editorTimeline = hasDuration ? (
-    <EditorTimeline engine={engine} muted={muted} onMutedChange={setMuted} />
-  ) : null;
+  const editorTimeline = (
+    <EditorTimeline
+      engine={engine}
+      ready={hasDuration}
+      muted={muted}
+      onMutedChange={setMuted}
+    />
+  );
   const timelinePane = (
     <EditorTimelinePane
       variant={layoutVariant}
@@ -578,13 +592,6 @@ function EditorScreenContent({
       timeline={editorTimeline}
     />
   );
-  const mobilePlaybackSourcePanel = (
-    <EditorPlaybackSourcePanel
-      previewSourceLabel={previewSourceLabel}
-      fallbackMessage={playbackFallbackReason}
-      hasHlsSource={Boolean(session.hlsSource)}
-    />
-  );
 
   function renderSubtitlePanel(className: string) {
     if (session.local) {
@@ -622,12 +629,7 @@ function EditorScreenContent({
 
   const propertiesContent = (
     <div className="cliparr-editor-scrollbar flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-3">
-      <EditorPlaybackSourcePanel
-        previewSourceLabel={previewSourceLabel}
-        fallbackMessage={playbackFallbackReason}
-        hasHlsSource={Boolean(session.hlsSource)}
-        className="shrink-0 p-0"
-      />
+      {playbackSourcePanel}
       {renderSubtitlePanel("min-h-editor-properties-min flex-1")}
     </div>
   );
@@ -656,30 +658,15 @@ function EditorScreenContent({
         onExportClick={handleOpenExportDialog}
       />
 
-      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-editor-border bg-editor-panel px-3 py-2 text-xs text-muted-foreground">
-        <span role="status">
-          {draft.notice ?? "Drafts save on this device for 14 days."}
-        </span>
-        <button
-          type="button"
-          disabled={exporting}
-          onClick={() => {
-            if (
-              globalThis.confirm(
-                "Reset this draft? This removes the saved clip range and subtitle edits.",
-              )
-            ) {
-              draft.reset();
-            }
-          }}
-          className="rounded px-2 py-1 text-foreground hover:bg-editor-control-hover focus-visible:ring-2 focus-visible:ring-editor-accent"
-        >
-          Reset draft
-        </button>
-      </div>
-      <EditorEditingTools history={editHistory} />
+      <EditorEditingTools
+        history={editHistory}
+        variant={layoutVariant}
+        onResetDraft={draft.reset}
+        resetDisabled={exporting}
+        draftNotice={draft.notice}
+      />
 
-      <main className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-2.5 sm:p-3 lg:overflow-hidden">
+      <main className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto p-2.5 [scrollbar-gutter:stable] sm:p-3 lg:overflow-hidden lg:[scrollbar-gutter:auto]">
         {isDesktopLayout ? (
           <EditorDesktopLayout
             playbackSidebarOpen={playbackSidebarOpen}
@@ -692,7 +679,6 @@ function EditorScreenContent({
         ) : (
           <EditorMobileLayout
             error={error}
-            playbackSourcePanel={mobilePlaybackSourcePanel}
             previewPane={previewPane}
             timelinePane={timelinePane}
             subtitlePanel={renderSubtitlePanel("min-h-editor-properties-min")}
diff --git a/apps/frontend/src/components/editor/EditorTimeline.tsx b/apps/frontend/src/components/editor/EditorTimeline.tsx
index 06881503..27d55368 100644
--- a/apps/frontend/src/components/editor/EditorTimeline.tsx
+++ b/apps/frontend/src/components/editor/EditorTimeline.tsx
@@ -8,11 +8,19 @@ import {
   type TimelineEngine,
   type UseTimelineTrackHeaderResult,
 } from "@techsquidtv/canvas-timeline";
-import { Eye, EyeOff, Volume2, VolumeX } from "lucide-react";
-import { useEffect, useRef } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  EyeOff,
+  Volume2,
+  VolumeX,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { EditorMediaRange } from "@/components/editor/EditorMediaRange";
 import { EditorMediaRangeCanvas } from "@/components/editor/EditorMediaRangeCanvas";
 import { EditorViewportScrollbar } from "@/components/editor/EditorViewportScrollbar";
+import { handleHorizontalScrollKeyDown } from "@/components/ui/scroll-area";
 import { zoomEditorTimeline } from "@/components/editor/editorTimelineZoom";
 import {
   EDITOR_MEDIA_TRACK_ID,
@@ -80,12 +88,18 @@ function TrackHeaderColumn({ muted, onMutedChange }: EditorTimelineProperties) {
   );
 }
 
-function EditorTimelineLayers({ engine }: { engine: TimelineEngine }) {
+function EditorTimelineLayers({
+  engine,
+  ready,
+}: {
+  engine: TimelineEngine;
+  ready: boolean;
+}) {
   const { tracks } = useTimelineTracks();
 
   return (
     <>
-      <CenterViewportOnInPoint />
+      {ready && <CenterViewportOnInPoint />}
       <Timeline.PlayheadArea />
       <Timeline.PlayheadGrabber />
       <Timeline.TrackList className="timeline-track-list-overlay">
@@ -131,10 +145,14 @@ function CenterViewportOnInPoint() {
 
 export function EditorTimeline({
   engine,
+  ready,
   muted,
   onMutedChange,
-}: EditorTimelineProperties & { engine: TimelineEngine }) {
+}: EditorTimelineProperties & { engine: TimelineEngine; ready: boolean }) {
   const root = useRef<HTMLDivElement>(null);
+  const horizontalScroller = useRef<HTMLDivElement>(null);
+  const trackHeader = useRef<HTMLDivElement>(null);
+  const [trackNamesVisible, setTrackNamesVisible] = useState(true);
   useEffect(() => {
     const element = root.current;
     if (!element) {
@@ -162,28 +180,63 @@ export function EditorTimeline({
   }, [engine]);
 
   return (
-    <div className="cliparr-timeline-v2 flex h-full min-h-0 flex-col bg-editor-panel">
-      <div className="flex min-h-0 flex-1">
-        <div className="w-32 shrink-0 border-r border-editor-border bg-editor-panel-muted/55">
-          <TrackHeaderColumn muted={muted} onMutedChange={onMutedChange} />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Timeline.Root
-            ref={root}
-            className="h-full min-h-editor-timeline-mobile w-full lg:min-h-0"
-          >
-            <CanvasRenderer showInOutPoints={false} />
-            <EditorMediaRangeCanvas />
-            <EditorTimelineLayers engine={engine} />
-          </Timeline.Root>
-        </div>
-      </div>
-      <div className="flex shrink-0">
-        <div className="w-32 shrink-0 border-t border-r border-editor-border bg-editor-panel-muted/55" />
-        <div className="cliparr-timeline-scrollbar-row min-w-0 flex-1 border-t border-editor-border px-2 py-1.5">
-          <EditorViewportScrollbar />
+    <div className="flex h-full min-h-0 flex-col [--editor-track-header-width:6rem] lg:[--editor-track-header-width:8rem]">
+      <div
+        ref={horizontalScroller}
+        role="region"
+        aria-label="Timeline tracks and names"
+        tabIndex={0}
+        className="cliparr-editor-scrollbar min-h-0 flex-1 overflow-x-auto overscroll-x-contain lg:overflow-x-hidden"
+        onScroll={(event) =>
+          setTrackNamesVisible(
+            event.currentTarget.scrollLeft <
+              (trackHeader.current?.offsetWidth ?? 0) - 1,
+          )
+        }
+        onKeyDown={handleHorizontalScrollKeyDown}
+      >
+        <div className="cliparr-timeline-v2 flex h-full min-h-0 w-[calc(100%+var(--editor-track-header-width))] flex-col bg-editor-panel lg:w-full">
+          <div className="flex min-h-0 flex-1">
+            <div
+              ref={trackHeader}
+              className="w-[var(--editor-track-header-width)] shrink-0 border-r border-editor-border bg-editor-panel-muted/55"
+            >
+              <TrackHeaderColumn muted={muted} onMutedChange={onMutedChange} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <Timeline.Root ref={root} className="h-full w-full">
+                <CanvasRenderer showInOutPoints={false} />
+                <EditorMediaRangeCanvas />
+                <EditorTimelineLayers engine={engine} ready={ready} />
+              </Timeline.Root>
+            </div>
+          </div>
+          <div className="flex shrink-0">
+            <div className="w-[var(--editor-track-header-width)] shrink-0 border-t border-r border-editor-border bg-editor-panel-muted/55" />
+            <div className="cliparr-timeline-scrollbar-row min-w-0 flex-1 border-t border-editor-border px-2 py-1.5">
+              <EditorViewportScrollbar />
+            </div>
+          </div>
         </div>
       </div>
+      <button
+        type="button"
+        className="flex min-h-11 shrink-0 items-center justify-center gap-2 border-t border-editor-border bg-editor-panel px-3 text-xs text-muted-foreground hover:bg-editor-control-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-editor-accent/35 focus-visible:outline-none lg:hidden"
+        onClick={() =>
+          horizontalScroller.current?.scrollTo({
+            left: trackNamesVisible
+              ? (trackHeader.current?.offsetWidth ?? 0)
+              : 0,
+          })
+        }
+      >
+        {trackNamesVisible ? (
+          <ChevronLeft className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
+        {trackNamesVisible ? "Hide track names" : "Show track names"}
+      </button>
     </div>
   );
 }
diff --git a/apps/frontend/src/components/frontendWorkflow.test.ts b/apps/frontend/src/components/frontendWorkflow.test.ts
index b1c4d5d0..b6574d80 100644
--- a/apps/frontend/src/components/frontendWorkflow.test.ts
+++ b/apps/frontend/src/components/frontendWorkflow.test.ts
@@ -937,6 +937,7 @@ void test("renders mobile editor controls trigger and compact range summary", ()
       TooltipProvider,
       null,
       createElement(EditorControls, {
+        playbackSourcePanel: null,
         variant: "mobile",
         playing: false,
         loadingPreview: false,
@@ -967,18 +968,21 @@ void test("renders mobile editor controls trigger and compact range summary", ()
   );
 
   assert.match(markup, /More clip controls/);
+  assert.match(markup, />Set in</);
+  assert.match(markup, />Set out</);
+  assert.doesNotMatch(markup, /aria-label="Edit Duration/);
   assert.match(markup, />In</);
   assert.match(markup, />Out</);
   assert.match(markup, />Duration</);
 });
 
-void test("renders editor readiness transition hooks", () => {
+void test("keeps timeline geometry mounted and inert until media is ready", () => {
   const waitingMarkup = renderToStaticMarkup(
     createElement(EditorTimelinePane, {
       variant: "desktop",
       controls: createElement("div"),
       hasDuration: false,
-      timeline: createElement("div"),
+      timeline: createElement("button", null, "Timeline interaction"),
     }),
   );
   const readyMarkup = renderToStaticMarkup(
@@ -986,13 +990,19 @@ void test("renders editor readiness transition hooks", () => {
       variant: "desktop",
       controls: createElement("div"),
       hasDuration: true,
-      timeline: createElement("div"),
+      timeline: createElement("button", null, "Timeline interaction"),
     }),
   );
 
   assert.match(waitingMarkup, /data-editor-waiting-duration/);
   assert.match(waitingMarkup, /Waiting for media duration/);
+  assert.match(waitingMarkup, /inert=""/);
+  assert.match(waitingMarkup, /aria-busy="true"/);
+  assert.match(waitingMarkup, /Timeline interaction/);
   assert.match(readyMarkup, /data-editor-timeline-ready/);
+  assert.match(readyMarkup, /Timeline interaction/);
+  assert.doesNotMatch(readyMarkup, /inert=""/);
+  assert.doesNotMatch(readyMarkup, /Waiting for media duration/);
 });
 
 void test("renders editor poster with the shared thumbnail view transition", () => {
@@ -1022,6 +1032,7 @@ void test("renders the editor framegrab camera control", () => {
       TooltipProvider,
       null,
       createElement(EditorControls, {
+        playbackSourcePanel: null,
         playing: false,
         loadingPreview: false,
         togglePlay: () => {},
diff --git a/apps/frontend/src/components/ui/scroll-area.tsx b/apps/frontend/src/components/ui/scroll-area.tsx
index 234c52ff..5f92c6e0 100644
--- a/apps/frontend/src/components/ui/scroll-area.tsx
+++ b/apps/frontend/src/components/ui/scroll-area.tsx
@@ -2,6 +2,20 @@ import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import * as React from "react";
 import { cn } from "@/lib/utilities";
 
+export function handleHorizontalScrollKeyDown(
+  event: React.KeyboardEvent<HTMLDivElement>,
+) {
+  if (
+    event.target !== event.currentTarget ||
+    (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+  ) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.scrollBy({ left: event.key === "ArrowRight" ? 32 : -32 });
+}
+
 type ScrollAreaProperties = React.ComponentPropsWithoutRef<
   typeof BaseScrollArea.Root
 > & {

From 0a27a0443e7b1f77db1698ced6618fa5707ea55a Mon Sep 17 00:00:00 2001
From: KyleTryon <git@techsquidtv.com>
Date: Wed, 9 Sep 2026 15:59:14 -0400
Subject: [PATCH 2/5] feat(frontend): add centered bars loaders to the editor

---
 .../src/components/editor/EditorLayout.tsx    |  6 +-
 .../src/components/editor/EditorPreview.tsx   |  9 ++-
 .../src/components/frontendWorkflow.test.ts   |  4 +-
 .../src/components/ui/bars-loader.tsx         | 76 +++++++++++++++++++
 apps/frontend/src/index.css                   |  6 +-
 .../src/routes/_app.edit.$sessionId.tsx       |  3 +-
 .../src/routes/local.edit.$sessionId.tsx      |  3 +-
 7 files changed, 91 insertions(+), 16 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/bars-loader.tsx

diff --git a/apps/frontend/src/components/editor/EditorLayout.tsx b/apps/frontend/src/components/editor/EditorLayout.tsx
index fe76ad08..68518978 100644
--- a/apps/frontend/src/components/editor/EditorLayout.tsx
+++ b/apps/frontend/src/components/editor/EditorLayout.tsx
@@ -11,6 +11,7 @@ import {
   EDITOR_RESIZE_TARGET_MINIMUM_SIZE,
 } from "@/components/editor/editorLayoutSizing";
 import { EditorSidebar } from "@/components/editor/EditorSidebar";
+import { BarsLoader } from "@/components/ui/bars-loader";
 import { cliparrMotionTransitions } from "@/lib/motionPresets";
 
 export type EditorLayoutVariant = "desktop" | "mobile";
@@ -117,7 +118,7 @@ export function EditorTimelinePane({
         aria-busy={!hasDuration}
       >
         <div
-          className={`h-full ${hasDuration ? "" : "opacity-40"}`}
+          className={`isolate h-full ${hasDuration ? "" : "opacity-40"}`}
           inert={!hasDuration}
           data-editor-timeline-ready={hasDuration || undefined}
         >
@@ -126,10 +127,9 @@ export function EditorTimelinePane({
         {!hasDuration && (
           <div
             className="absolute inset-0 flex items-center justify-center bg-editor-panel/70 px-3 text-center text-sm text-muted-foreground"
-            role="status"
             data-editor-waiting-duration
           >
-            Waiting for media duration.
+            <BarsLoader label="Loading timeline…" showLabel />
           </div>
         )}
       </div>
diff --git a/apps/frontend/src/components/editor/EditorPreview.tsx b/apps/frontend/src/components/editor/EditorPreview.tsx
index 6afae705..03047e5c 100644
--- a/apps/frontend/src/components/editor/EditorPreview.tsx
+++ b/apps/frontend/src/components/editor/EditorPreview.tsx
@@ -1,4 +1,5 @@
-import { LoaderCircle, Play } from "lucide-react";
+import { Play } from "lucide-react";
+import { BarsLoader } from "@/components/ui/bars-loader";
 import type { RefCallback } from "react";
 import type { MediaDimensions } from "@/lib/editorMedia";
 import type { ReactNode } from "react";
@@ -44,6 +45,7 @@ export function EditorPreview({
     <div
       className="group relative aspect-video h-full max-h-full w-auto max-w-full overflow-hidden bg-editor-monitor"
       style={aspectRatio ? { aspectRatio } : undefined}
+      aria-busy={showLoadingOverlay}
     >
       <canvas
         ref={canvasRef}
@@ -88,7 +90,7 @@ export function EditorPreview({
       )}
       <div
         aria-hidden={!showLoadingOverlay}
-        className={`pointer-events-none absolute inset-0 flex items-center justify-center gap-2 text-sm text-editor-preview-overlay-foreground transition-opacity duration-200 ease-out ${
+        className={`pointer-events-none absolute inset-0 flex items-center justify-center px-3 text-editor-preview-overlay-foreground transition-opacity duration-200 ease-out motion-reduce:transition-none ${
           showLoadingOverlay ? "opacity-100" : "opacity-0"
         } ${
           hasPosterImage
@@ -96,8 +98,7 @@ export function EditorPreview({
             : "bg-editor-preview-overlay"
         }`}
       >
-        <LoaderCircle className="h-4 w-4 animate-spin" />
-        <span>{loadingStatus}</span>
+        {showLoadingOverlay && <BarsLoader label={loadingStatus} showLabel />}
       </div>
     </div>
   );
diff --git a/apps/frontend/src/components/frontendWorkflow.test.ts b/apps/frontend/src/components/frontendWorkflow.test.ts
index b6574d80..8aec3a2f 100644
--- a/apps/frontend/src/components/frontendWorkflow.test.ts
+++ b/apps/frontend/src/components/frontendWorkflow.test.ts
@@ -995,14 +995,14 @@ void test("keeps timeline geometry mounted and inert until media is ready", () =
   );
 
   assert.match(waitingMarkup, /data-editor-waiting-duration/);
-  assert.match(waitingMarkup, /Waiting for media duration/);
+  assert.match(waitingMarkup, /Loading timeline…/);
   assert.match(waitingMarkup, /inert=""/);
   assert.match(waitingMarkup, /aria-busy="true"/);
   assert.match(waitingMarkup, /Timeline interaction/);
   assert.match(readyMarkup, /data-editor-timeline-ready/);
   assert.match(readyMarkup, /Timeline interaction/);
   assert.doesNotMatch(readyMarkup, /inert=""/);
-  assert.doesNotMatch(readyMarkup, /Waiting for media duration/);
+  assert.doesNotMatch(readyMarkup, /Loading timeline…/);
 });
 
 void test("renders editor poster with the shared thumbnail view transition", () => {
diff --git a/apps/frontend/src/components/ui/bars-loader.tsx b/apps/frontend/src/components/ui/bars-loader.tsx
new file mode 100644
index 00000000..ed26b560
--- /dev/null
+++ b/apps/frontend/src/components/ui/bars-loader.tsx
@@ -0,0 +1,76 @@
+/*
+ * Bars animation adapted from https://github.com/starc007/ui-components
+ * MIT License — Copyright (c) 2026 Saurabh Chauhan
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { motion, useReducedMotion } from "motion/react";
+import { cn } from "@/lib/utilities";
+
+interface BarsLoaderProps {
+  size?: number;
+  label?: string;
+  showLabel?: boolean;
+  className?: string;
+}
+
+export function BarsLoader({
+  size = 32,
+  label = "Loading",
+  showLabel = false,
+  className,
+}: BarsLoaderProps) {
+  const reduceMotion = useReducedMotion();
+
+  return (
+    <span
+      role="status"
+      className={cn(
+        "inline-flex flex-col items-center justify-center gap-2 text-center text-xs",
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className="flex shrink-0 items-center justify-center"
+        style={{ width: size, height: size, gap: size * 0.1 }}
+      >
+        {[0, 1, 2, 3].map((index) => (
+          <motion.span
+            key={`${index}-${Boolean(reduceMotion)}`}
+            className="rounded-full bg-current"
+            style={{ width: size * 0.16, height: size, originY: 1 }}
+            animate={
+              reduceMotion
+                ? { opacity: [0.4, 1, 0.4] }
+                : { scaleY: [0.3, 1, 0.3] }
+            }
+            transition={{
+              duration: reduceMotion ? 1.4 : 1,
+              ease: "easeInOut",
+              repeat: Infinity,
+              delay: index * 0.12,
+            }}
+          />
+        ))}
+      </span>
+      <span className={showLabel ? "max-w-64 text-balance" : "sr-only"}>
+        {label}
+      </span>
+    </span>
+  );
+}
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index d5fb04d2..71b7f1b4 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -84,11 +84,7 @@
     var(--foreground) 12%,
     transparent
   );
-  --editor-preview-overlay-foreground: color-mix(
-    in oklch,
-    var(--foreground) 80%,
-    var(--background)
-  );
+  --editor-preview-overlay-foreground: oklch(0.92 0 0);
   --editor-workspace: color-mix(
     in oklch,
     var(--background) 90%,
diff --git a/apps/frontend/src/routes/_app.edit.$sessionId.tsx b/apps/frontend/src/routes/_app.edit.$sessionId.tsx
index 3ec92d47..181e9370 100644
--- a/apps/frontend/src/routes/_app.edit.$sessionId.tsx
+++ b/apps/frontend/src/routes/_app.edit.$sessionId.tsx
@@ -2,6 +2,7 @@ import { createFileRoute, useCanGoBack } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { cliparrClient } from "@/api/cliparrClient";
 import EditorScreen from "@/components/editor/EditorScreen";
+import { BarsLoader } from "@/components/ui/bars-loader";
 import {
   editorSessionFromCurrentlyPlaying,
   type EditorSession,
@@ -85,7 +86,7 @@ function EditorRouteComponent() {
   if (loading) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
-        Loading editor...
+        <BarsLoader label="Loading editor…" showLabel />
       </div>
     );
   }
diff --git a/apps/frontend/src/routes/local.edit.$sessionId.tsx b/apps/frontend/src/routes/local.edit.$sessionId.tsx
index 855ded1b..4e8bdd76 100644
--- a/apps/frontend/src/routes/local.edit.$sessionId.tsx
+++ b/apps/frontend/src/routes/local.edit.$sessionId.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useAuth } from "@/auth";
 import { editorDrafts } from "@/components/editor/editorDrafts";
 import EditorScreen from "@/components/editor/EditorScreen";
+import { BarsLoader } from "@/components/ui/bars-loader";
 import { LocalVideoOpenDialog } from "@/components/local-media/LocalVideoOpenDialog";
 import {
   primaryButtonClasses,
@@ -56,7 +57,7 @@ function LocalEditorRouteComponent() {
   if (loading) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
-        Loading local video...
+        <BarsLoader label="Loading local video…" showLabel />
       </div>
     );
   }

From 4c909462cc8928179792073da00e16cf6e058b2d Mon Sep 17 00:00:00 2001
From: KyleTryon <git@techsquidtv.com>
Date: Wed, 9 Sep 2026 16:15:47 -0400
Subject: [PATCH 3/5] feat(frontend): unify dropdown motion and scrollbar
 styling

---
 .../src/components/editor/EditorControls.tsx  |  4 +-
 .../editor/EditorPropertyControls.tsx         |  2 +-
 .../src/components/editor/EditorScreen.tsx    |  2 +-
 .../components/editor/EditorSubtitlePanel.tsx |  4 +-
 .../src/components/editor/EditorTimeline.tsx  |  2 +-
 .../components/editor/editorDialogStyles.ts   |  2 +-
 .../provider-connect/ProviderConnectFlow.tsx  |  2 +-
 .../src/components/sources/SourcesDialog.tsx  |  2 +-
 .../sources/SourcesDialogSections.tsx         | 30 +++---
 .../src/components/ui/scroll-area.tsx         |  2 +-
 apps/frontend/src/components/ui/select.css    | 92 +++++++++++++++++++
 apps/frontend/src/components/ui/select.tsx    | 22 +++--
 apps/frontend/src/index.css                   | 75 ++++++++-------
 13 files changed, 169 insertions(+), 72 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/select.css

diff --git a/apps/frontend/src/components/editor/EditorControls.tsx b/apps/frontend/src/components/editor/EditorControls.tsx
index e9eecb7a..dae877a4 100644
--- a/apps/frontend/src/components/editor/EditorControls.tsx
+++ b/apps/frontend/src/components/editor/EditorControls.tsx
@@ -423,7 +423,7 @@ export function EditorControls({
                   Additional clip controls
                 </DrawerDescription>
               </DrawerHeader>
-              <div className="cliparr-editor-scrollbar min-h-0 overflow-y-auto px-3 pb-4">
+              <div className="min-h-0 overflow-y-auto px-3 pb-4">
                 <div className="pt-3">{playbackSourcePanel}</div>
                 <section className="border-b border-editor-border py-3">
                   <div className="mb-2 text-ui-micro font-semibold uppercase tracking-[var(--tracking-caps-md)] text-muted-foreground">
@@ -458,7 +458,7 @@ export function EditorControls({
           </Drawer>
         </div>
         <div
-          className="cliparr-editor-scrollbar mt-2 overflow-x-auto overscroll-x-contain border-y border-editor-border"
+          className="mt-2 overflow-x-auto overscroll-x-contain border-y border-editor-border"
           role="region"
           aria-label="Clip in, out, and duration"
           tabIndex={0}
diff --git a/apps/frontend/src/components/editor/EditorPropertyControls.tsx b/apps/frontend/src/components/editor/EditorPropertyControls.tsx
index a077d719..31f020cb 100644
--- a/apps/frontend/src/components/editor/EditorPropertyControls.tsx
+++ b/apps/frontend/src/components/editor/EditorPropertyControls.tsx
@@ -8,7 +8,7 @@ export function editorPropertyLabelClassName() {
 }
 
 export function editorPropertySelectTriggerClassName() {
-  return "h-8 w-full min-w-0 rounded-[var(--radius-control)] border-editor-border bg-editor-control px-2.5 text-xs font-medium text-sidebar-foreground shadow-none hover:bg-editor-control-hover focus-visible:ring-2 focus-visible:ring-editor-accent/35";
+  return "h-8 w-full min-w-0 border-editor-border bg-editor-control px-2.5 text-xs font-medium text-sidebar-foreground shadow-none hover:bg-editor-control-hover focus-visible:ring-2 focus-visible:ring-editor-accent/35";
 }
 
 export function EditorPropertySection({
diff --git a/apps/frontend/src/components/editor/EditorScreen.tsx b/apps/frontend/src/components/editor/EditorScreen.tsx
index a8a3f11b..c4efebd2 100644
--- a/apps/frontend/src/components/editor/EditorScreen.tsx
+++ b/apps/frontend/src/components/editor/EditorScreen.tsx
@@ -628,7 +628,7 @@ function EditorScreenContent({
   }
 
   const propertiesContent = (
-    <div className="cliparr-editor-scrollbar flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-3">
+    <div className="flex h-full min-h-0 flex-col gap-3 overflow-y-auto p-3">
       {playbackSourcePanel}
       {renderSubtitlePanel("min-h-editor-properties-min flex-1")}
     </div>
diff --git a/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx b/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx
index d8a6cbe3..1f4b42c2 100644
--- a/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx
+++ b/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx
@@ -175,7 +175,7 @@ export function EditorSubtitlePanel({
   );
 
   return (
-    <div className="cliparr-editor-scrollbar min-h-0 flex-1 overflow-y-auto bg-editor-panel text-sidebar-foreground">
+    <div className="min-h-0 flex-1 overflow-y-auto bg-editor-panel text-sidebar-foreground">
       <EditorPropertyAccordion<EditorPropertiesSectionId>
         value={editorPropertiesOpenSections}
         onValueChange={onEditorPropertiesOpenSectionsChange}
@@ -304,7 +304,7 @@ export function EditorSubtitlePanel({
                         onSelectedSubtitleTextCommit(subtitleTextDraft);
                       }
                     }}
-                    className="cliparr-editor-scrollbar w-full resize-y rounded-[var(--radius-control)] border border-editor-border bg-editor-control px-2.5 py-2 text-xs leading-relaxed text-foreground outline-none focus:border-editor-accent focus:ring-2 focus:ring-editor-accent/25"
+                    className="w-full resize-y rounded-[var(--radius-control)] border border-editor-border bg-editor-control px-2.5 py-2 text-xs leading-relaxed text-foreground outline-none focus:border-editor-accent focus:ring-2 focus:ring-editor-accent/25"
                   />
                 </EditorPropertyRow>
                 <EditorPropertyRow label="In">
diff --git a/apps/frontend/src/components/editor/EditorTimeline.tsx b/apps/frontend/src/components/editor/EditorTimeline.tsx
index 27d55368..7d4ed3f2 100644
--- a/apps/frontend/src/components/editor/EditorTimeline.tsx
+++ b/apps/frontend/src/components/editor/EditorTimeline.tsx
@@ -186,7 +186,7 @@ export function EditorTimeline({
         role="region"
         aria-label="Timeline tracks and names"
         tabIndex={0}
-        className="cliparr-editor-scrollbar min-h-0 flex-1 overflow-x-auto overscroll-x-contain lg:overflow-x-hidden"
+        className="min-h-0 flex-1 overflow-x-auto overscroll-x-contain lg:overflow-x-hidden"
         onScroll={(event) =>
           setTrackNamesVisible(
             event.currentTarget.scrollLeft <
diff --git a/apps/frontend/src/components/editor/editorDialogStyles.ts b/apps/frontend/src/components/editor/editorDialogStyles.ts
index 87bb531f..88ea999c 100644
--- a/apps/frontend/src/components/editor/editorDialogStyles.ts
+++ b/apps/frontend/src/components/editor/editorDialogStyles.ts
@@ -1,5 +1,5 @@
 export function compactSelectTriggerClassName() {
-  return "h-8 w-full min-w-0 rounded-md border-border bg-background px-2.5 text-xs font-medium shadow-none focus-visible:ring-2";
+  return "h-8 w-full min-w-0 border-border bg-background px-2.5 text-xs font-medium shadow-none focus-visible:ring-2";
 }
 
 export function sectionLabelClassName() {
diff --git a/apps/frontend/src/components/provider-connect/ProviderConnectFlow.tsx b/apps/frontend/src/components/provider-connect/ProviderConnectFlow.tsx
index 89db86ba..4286c487 100644
--- a/apps/frontend/src/components/provider-connect/ProviderConnectFlow.tsx
+++ b/apps/frontend/src/components/provider-connect/ProviderConnectFlow.tsx
@@ -541,7 +541,7 @@ function ProviderConnectTabsLayout({
           "@container",
           isScreen
             ? "pt-2 sm:rounded-lg sm:border sm:border-border sm:bg-background sm:p-4"
-            : "cliparr-editor-scrollbar h-source-provider-panel overflow-y-auto rounded-lg border border-border bg-background p-4",
+            : "h-source-provider-panel overflow-y-auto rounded-lg border border-border bg-background p-4",
         )}
       >
         {providers.map((provider) => (
diff --git a/apps/frontend/src/components/sources/SourcesDialog.tsx b/apps/frontend/src/components/sources/SourcesDialog.tsx
index d0b64cd8..a74a8c4c 100644
--- a/apps/frontend/src/components/sources/SourcesDialog.tsx
+++ b/apps/frontend/src/components/sources/SourcesDialog.tsx
@@ -238,7 +238,7 @@ export default function SourcesDialog({
         onStatusFilterChange={setStatusFilter}
       />
 
-      <div className="cliparr-editor-scrollbar flex-1 overflow-y-auto px-4 py-4 sm:px-5">
+      <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-5">
         <div className="space-y-3">
           <SourcesDialogAlerts error={error} feedback={feedback} />
 
diff --git a/apps/frontend/src/components/sources/SourcesDialogSections.tsx b/apps/frontend/src/components/sources/SourcesDialogSections.tsx
index 70dd4245..bf32f169 100644
--- a/apps/frontend/src/components/sources/SourcesDialogSections.tsx
+++ b/apps/frontend/src/components/sources/SourcesDialogSections.tsx
@@ -18,6 +18,13 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   destructiveAlertClasses,
   iconButtonClasses,
@@ -354,21 +361,20 @@ export function SourcesDialogFilters({
             />
           </label>
 
-          <label className="flex h-9 items-center gap-3 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground">
-            <span className={sourceFieldLabelClasses}>Provider</span>
-            <select
-              value={providerFilter}
-              onChange={(event) => onProviderFilterChange(event.target.value)}
-              className="h-full min-w-0 bg-transparent text-sm text-foreground outline-none"
-            >
-              <option value="all">All providers</option>
+          <Select value={providerFilter} onValueChange={onProviderFilterChange}>
+            <SelectTrigger aria-label="Provider" className="lg:w-52">
+              <span className={sourceFieldLabelClasses}>Provider</span>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All providers</SelectItem>
               {providerOptions.map((providerId) => (
-                <option key={providerId} value={providerId}>
+                <SelectItem key={providerId} value={providerId}>
                   {formatProviderName(providerId)}
-                </option>
+                </SelectItem>
               ))}
-            </select>
-          </label>
+            </SelectContent>
+          </Select>
         </div>
 
         <div className="flex flex-wrap gap-1 rounded-md border border-border bg-card p-1">
diff --git a/apps/frontend/src/components/ui/scroll-area.tsx b/apps/frontend/src/components/ui/scroll-area.tsx
index 5f92c6e0..e684ff80 100644
--- a/apps/frontend/src/components/ui/scroll-area.tsx
+++ b/apps/frontend/src/components/ui/scroll-area.tsx
@@ -82,7 +82,7 @@ const ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProperties>(
       >
         <BaseScrollArea.Thumb
           className={cn(
-            "relative flex-1 rounded-full bg-border/80 transition-colors hover:bg-muted-foreground/60 before:absolute before:inset-0 before:-m-1",
+            "relative flex-1 rounded-full bg-scrollbar-thumb transition-colors hover:bg-scrollbar-thumb-hover before:absolute before:inset-0 before:-m-1",
             thumbClassName,
           )}
           data-slot="scroll-area-thumb"
diff --git a/apps/frontend/src/components/ui/select.css b/apps/frontend/src/components/ui/select.css
new file mode 100644
index 00000000..3bc7f879
--- /dev/null
+++ b/apps/frontend/src/components/ui/select.css
@@ -0,0 +1,92 @@
+/* BeUI Select's unfold-and-separate motion, with Radix handling focus,
+ * collisions and scrolling. Animate the surface without changing its measured
+ * size, so opening a dropdown never moves the surrounding fields. */
+.cliparr-select-content {
+  --select-attached-offset: -8px;
+}
+
+.cliparr-select-content[data-side="top"] {
+  --select-attached-offset: 8px;
+}
+
+.cliparr-select-content[data-state="open"] {
+  animation: select-unfold 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.cliparr-select-content[data-state="closed"] {
+  animation: select-fold 140ms ease-out both;
+  pointer-events: none;
+}
+
+.cliparr-select-content[data-state="open"] [data-slot="select-item"] {
+  --select-item-delay: 140ms;
+  animation: select-item-enter 200ms ease-out var(--select-item-delay) both;
+}
+
+.cliparr-select-content [data-slot="select-item"]:nth-child(1) {
+  --select-item-delay: 35ms;
+}
+
+.cliparr-select-content [data-slot="select-item"]:nth-child(2) {
+  --select-item-delay: 70ms;
+}
+
+.cliparr-select-content [data-slot="select-item"]:nth-child(3) {
+  --select-item-delay: 105ms;
+}
+
+@keyframes select-unfold {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--select-attached-offset)) scaleY(0.55);
+  }
+  65% {
+    opacity: 1;
+    transform: translateY(0) scaleY(1.025);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@keyframes select-fold {
+  to {
+    opacity: 0;
+    transform: translateY(var(--select-attached-offset)) scaleY(0.96);
+  }
+}
+
+@keyframes select-item-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cliparr-select-content[data-state="open"] {
+    animation: select-fade-in 120ms ease-out both;
+  }
+
+  .cliparr-select-content[data-state="closed"] {
+    animation: select-fade-in 120ms ease-out reverse both;
+  }
+
+  .cliparr-select-content[data-state="open"] [data-slot="select-item"] {
+    animation: none;
+  }
+}
+
+@keyframes select-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
index d92a15a1..38d5bf3e 100644
--- a/apps/frontend/src/components/ui/select.tsx
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -35,14 +35,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "group/select flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--radius-control)] border border-input bg-background px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,border-color] outline-none hover:border-ring/50 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:truncate dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-4 opacity-50 transition-transform duration-300 ease-out group-data-[state=open]/select:rotate-180 motion-reduce:transition-none" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -51,8 +51,10 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position = "item-aligned",
-  align = "center",
+  position = "popper",
+  align = "start",
+  sideOffset = 8,
+  collisionPadding = 12,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
@@ -60,21 +62,21 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-select-content-min origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "cliparr-select-content relative z-50 max-h-[min(22rem,var(--radix-select-content-available-height))] min-w-select-content-min max-w-[calc(100vw-1.5rem)] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-[var(--radius-control)] border border-border bg-popover text-popover-foreground shadow-lg",
           className,
         )}
         position={position}
         align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         {...props}
       >
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            "p-1",
+            "p-1.5",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+              "w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1.5",
           )}
         >
           {children}
@@ -107,7 +109,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex min-h-9 w-full cursor-default items-center gap-2 rounded-[var(--radius-control)] py-2 pr-8 pl-2.5 text-sm text-muted-foreground outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-muted data-[state=checked]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 71b7f1b4..45c584bc 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./components/ui/select.css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -71,6 +72,11 @@
   --tracking-caps-xl: calc(var(--tracking-normal) + 0.18em);
   --tracking-caps-2xl: calc(var(--tracking-normal) + 0.2em);
   --tracking-caps-3xl: calc(var(--tracking-normal) + 0.22em);
+  --scrollbar-thumb-hover: color-mix(
+    in oklch,
+    var(--scrollbar-thumb) 74%,
+    var(--foreground)
+  );
   --radius-control: calc(var(--radius) - 2px);
   --radius-panel: calc(var(--radius) * 7);
   --editor-preview-stage: var(--editor-monitor);
@@ -131,7 +137,7 @@
     var(--foreground) 86%,
     var(--primary)
   );
-  --editor-scrollbar: color-mix(
+  --scrollbar-thumb: color-mix(
     in oklch,
     var(--muted-foreground) 42%,
     transparent
@@ -297,7 +303,7 @@
     var(--foreground) 88%,
     var(--primary)
   );
-  --editor-scrollbar: color-mix(
+  --scrollbar-thumb: color-mix(
     in oklch,
     var(--muted-foreground) 46%,
     transparent
@@ -396,7 +402,8 @@
   --color-editor-preview-overlay-foreground: var(
     --editor-preview-overlay-foreground
   );
-  --color-editor-scrollbar: var(--editor-scrollbar);
+  --color-scrollbar-thumb: var(--scrollbar-thumb);
+  --color-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
   --color-editor-range-track: var(--editor-range-track);
   --color-editor-range-track-border: var(--editor-range-track-border);
   --color-editor-range-fill: var(--editor-range-fill);
@@ -478,6 +485,30 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-width: thin;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  *::-webkit-scrollbar-track,
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background: var(--scrollbar-thumb);
+    background-clip: padding-box;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+    background-clip: padding-box;
   }
 
   body {
@@ -500,36 +531,6 @@
   }
 }
 
-.cliparr-editor-scrollbar {
-  scrollbar-color: var(--editor-scrollbar) transparent;
-  scrollbar-width: thin;
-}
-
-.cliparr-editor-scrollbar::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-.cliparr-editor-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.cliparr-editor-scrollbar::-webkit-scrollbar-thumb {
-  border: 3px solid transparent;
-  border-radius: 999px;
-  background: var(--editor-scrollbar);
-  background-clip: padding-box;
-}
-
-.cliparr-editor-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: color-mix(
-    in oklch,
-    var(--editor-scrollbar) 74%,
-    var(--foreground)
-  );
-  background-clip: padding-box;
-}
-
 .cliparr-editor-range {
   height: 1.125rem;
   cursor: pointer;
@@ -620,12 +621,8 @@
   --timeline-inout-accent: var(--editor-accent);
   --timeline-scrollbar-bg: var(--editor-panel);
   --timeline-scrollbar-border: var(--editor-border);
-  --timeline-scrollbar-thumb: var(--editor-scrollbar);
-  --timeline-scrollbar-thumb-hover: color-mix(
-    in oklch,
-    var(--editor-scrollbar) 74%,
-    var(--foreground)
-  );
+  --timeline-scrollbar-thumb: var(--scrollbar-thumb);
+  --timeline-scrollbar-thumb-hover: var(--scrollbar-thumb-hover);
   font-family: var(--font-sans);
 }
 

From 8c37e188244e90bf1eef342db47932abcae5d7d9 Mon Sep 17 00:00:00 2001
From: KyleTryon <git@techsquidtv.com>
Date: Wed, 9 Sep 2026 16:19:22 -0400
Subject: [PATCH 4/5] fix(frontend): match clip focus outline to its corners

---
 apps/frontend/src/index.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 45c584bc..423bd3b8 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -648,6 +648,8 @@
 }
 
 .editor-media-range-row .editor-media-range {
+  /* Match the canvas clip's 4px corners instead of the scrollbar's pill. */
+  --timeline-radius-full: 4px;
   z-index: 31;
   border: 0;
   background: transparent;

From a6b518e40f1e44e1886c1acb0606f8de52cde3c4 Mon Sep 17 00:00:00 2001
From: KyleTryon <git@techsquidtv.com>
Date: Wed, 9 Sep 2026 19:43:21 -0400
Subject: [PATCH 5/5] fix(frontend): remove duplicate subtitle track heading

---
 .../components/editor/EditorPropertyControls.tsx | 16 ++++++++++------
 .../components/editor/EditorSubtitlePanel.tsx    |  3 ++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/editor/EditorPropertyControls.tsx b/apps/frontend/src/components/editor/EditorPropertyControls.tsx
index 31f020cb..160b55a4 100644
--- a/apps/frontend/src/components/editor/EditorPropertyControls.tsx
+++ b/apps/frontend/src/components/editor/EditorPropertyControls.tsx
@@ -16,17 +16,21 @@ export function EditorPropertySection({
   action,
   children,
 }: {
-  title: string;
+  title?: string;
   action?: ReactNode;
   children: ReactNode;
 }) {
+  const hasHeader = Boolean(title || action);
+
   return (
     <section className="border-b border-editor-border/80 px-3 py-3 last:border-b-0">
-      <div className="flex min-h-7 items-center justify-between gap-3">
-        <div className={editorPropertyLabelClassName()}>{title}</div>
-        {action}
-      </div>
-      <div className="mt-2.5 space-y-2.5">{children}</div>
+      {hasHeader && (
+        <div className="flex min-h-7 items-center justify-between gap-3">
+          <div className={editorPropertyLabelClassName()}>{title}</div>
+          {action}
+        </div>
+      )}
+      <div className={cn("space-y-2.5", hasHeader && "mt-2.5")}>{children}</div>
     </section>
   );
 }
diff --git a/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx b/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx
index 1f4b42c2..03628a20 100644
--- a/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx
+++ b/apps/frontend/src/components/editor/EditorSubtitlePanel.tsx
@@ -200,13 +200,14 @@ export function EditorSubtitlePanel({
             )
           }
         >
-          <EditorPropertySection title="Track">
+          <EditorPropertySection>
             <EditorPropertyRow label="Track">
               <Select
                 value={selectedSubtitleTrackKey}
                 onValueChange={onSelectedSubtitleTrackKeyChange}
               >
                 <SelectTrigger
+                  aria-label="Subtitle track"
                   size="sm"
                   className={editorPropertySelectTriggerClassName()}
                 >