refactor: Update bottom controls for improved styling and functionality

- Adjusted button styles across various components for consistency and better UX.
- Enhanced layout of action controls to utilize whitespace more effectively.
- Updated slider styles for a more modern appearance and improved usability.
- Refined input fields and labels for better accessibility and readability.
- Introduced new app surface styles for a cohesive design across the application.
- Added tests for canvas cursor behavior to ensure correct cursor display during operations.

view/BottomControlsIsland.tsx

@@ -50,18 +50,18 @@ export function BottomControlsIsland({ document, selection, viewport, visible, a
   return (
     <div
       aria-hidden={!visible}
-      className={`flex min-h-20 min-w-96 rounded-[2rem] px-4 py-2 items-center justify-center gap-4 text-sm text-white backdrop-blur transition-all duration-200 ${
+      className={`app-surface subtle-scrollbar flex min-h-12 w-fit max-w-[calc(100vw-1.5rem)] min-w-0 flex-nowrap items-center justify-start gap-2 overflow-x-auto overflow-y-hidden rounded-xl px-2 py-1.5 text-xs text-white transition-all duration-200 ${
         visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
       }`}
     >
       {operation === "generate" ? (
         <GenerateActionControls settings={generateSettings} generation={generation} dispatch={dispatch} workflow={generationWorkflow} generate={documentActions.generate} />
+      ) : operation === "chromaKey" ? (
+        <ChromaKeyControls document={document} selection={selection} settings={chromaKeySettings} dispatch={dispatch} />
       ) : (activeTool === "brush" || activeTool === "eraser") && brushHint ? (
         <BrushHint tool={activeTool} hint={brushHint} />
       ) : activeTool === "brush" || activeTool === "eraser" ? (
         <BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskViewMode={maskViewMode} dispatch={dispatch} />
-      ) : operation === "chromaKey" ? (
-        <ChromaKeyControls document={document} selection={selection} settings={chromaKeySettings} dispatch={dispatch} />
       ) : activeTool === "magicWand" ? (
         <MagicWandControls settings={magicWandSettings} dispatch={dispatch} />
       ) : transformBounds && transformTarget ? (
@@ -78,7 +78,7 @@ export function BottomControlsIsland({ document, selection, viewport, visible, a
 function BrushHint({ tool, hint }: { tool: "brush" | "eraser"; hint: string }) {
   return (
     <div className="flex items-center gap-3 px-4 text-center">
-      <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-medium uppercase tracking-wide text-white/55">{tool}</span>
+      <span className="rounded bg-white/[0.06] px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-white/45">{tool}</span>
       <span className="max-w-[34rem] text-sm font-medium text-white/80">{hint}</span>
     </div>
   );