From 24f30f7b73a54827a4680172f69e5c07ee53b9af Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Wed, 4 Mar 2026 00:11:51 +0800
Subject: [PATCH] style(canvas): flatten bottom-left zoom rail visuals

---
 app/canvas/[id]/page.tsx | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index c845dcdb7..a10ec5fd5 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -822,12 +822,18 @@ export default function CanvasEditorPage({ params }: PageProps) {
         {/* 6. Bottom Left Compact Controls */}
         <div
           className="absolute z-20"
-          style={{ bottom: `${FLOATING_BOTTOM_INSET}px`, left: `${compactControlsLeft}px` }}
+          style={{ bottom: `${FLOATING_BOTTOM_INSET + 4}px`, left: `${compactControlsLeft + 8}px` }}
         >
-          <div className="flex items-center gap-0.5 rounded-xl border border-border/60 bg-background/82 px-1.5 py-1 shadow-lg backdrop-blur-sm">
+          <div className="flex items-center gap-1 text-muted-foreground">
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={undo}
+                  disabled={!canUndo}
+                  className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
+                >
                   <Undo2 className="h-3 w-3" />
                 </Button>
               </TooltipTrigger>
@@ -836,22 +842,38 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={redo}
+                  disabled={!canRedo}
+                  className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
+                >
                   <Redo2 className="h-3 w-3" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">重做</TooltipContent>
             </Tooltip>
 
-            <Separator orientation="vertical" className="mx-1 h-4" />
+            <div className="mx-1 h-4 w-px bg-border/70" />
 
-            <Button variant="ghost" size="icon" onClick={zoomOut} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={zoomOut}
+              className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
+            >
               <ZoomOut className="h-3.5 w-3.5" />
             </Button>
-            <span className="w-11 text-center text-[11px] tabular-nums font-medium text-muted-foreground">
+            <span className="w-10 text-center text-[10px] tabular-nums font-medium text-muted-foreground">
               {Math.round(viewport.zoom * 100)}%
             </span>
-            <Button variant="ghost" size="icon" onClick={zoomIn} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={zoomIn}
+              className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
+            >
               <ZoomIn className="h-3.5 w-3.5" />
             </Button>
           </div>