fix(frontend): stop zoom menubar from resizing on zoom change

The canvas zoom control had no left padding (the percentage nearly
touched the edge) and its width tracked the label length, so the
menubar expanded and contracted as the zoom value changed (e.g. '200%'
is wider than '96%').

Give the zoom label a fixed width sized for the widest value ('200%' at
MAX_ZOOM=2), left padding, and tabular-nums so digit widths stay
constant. The chevron and adjacent controls now hold position across
the full 25%-200% zoom range.

Author: keval718

src/frontend/src/components/core/canvasControlsComponent/CanvasControlsDropdown.tsx

@@ -107,7 +107,7 @@ const CanvasControlsDropdown = ({
           title={t("canvas.controls")}
         >
           <div className="flex items-center justify-center gap-1">
-            <span className="text-sm text-muted-foreground group-hover:text-foreground">
+            <span className="w-11 pl-1.5 text-left text-sm tabular-nums text-muted-foreground group-hover:text-foreground">
               {formatZoomPercentage(zoom)}
             </span>
             <IconComponent