diff --git a/src/features/map/core/components/toolbar.tsx b/src/features/map/core/components/toolbar.tsx
index 1ec3da1..ae7b8e9 100644
--- a/src/features/map/core/components/toolbar.tsx
+++ b/src/features/map/core/components/toolbar.tsx
@@ -47,7 +47,7 @@ export function MapToolbar({
           "pointer-events-auto p-1",
           MAP_CONTROL_RADIUS_CLASS_NAME,
           MAP_CONTROL_SURFACE_CLASS_NAME,
-          isVertical ? "flex w-12 flex-col" : "inline-flex",
+          isVertical ? "flex w-fit flex-col" : "inline-flex",
           className
         )}
       >
diff --git a/src/features/map/core/components/zoom.tsx b/src/features/map/core/components/zoom.tsx
index 8f0b15d..210afb1 100644
--- a/src/features/map/core/components/zoom.tsx
+++ b/src/features/map/core/components/zoom.tsx
@@ -86,7 +86,7 @@ export function MapZoom({
       <div
         role="group"
         aria-label="地图缩放"
-        className={cn("pointer-events-auto flex w-12 flex-col gap-2", className)}
+        className={cn("pointer-events-auto flex w-fit flex-col gap-2", className)}
       >
         <div
           className={cn(
diff --git a/src/features/workbench/layout/workbench-layout.test.ts b/src/features/workbench/layout/workbench-layout.test.ts
index fc49703..27b2d93 100644
--- a/src/features/workbench/layout/workbench-layout.test.ts
+++ b/src/features/workbench/layout/workbench-layout.test.ts
@@ -27,12 +27,12 @@ describe("workbench floating panels", () => {
     expect(resolveMobileWorkbenchOverlayLayout(true)).toEqual({
       timelineBottom: 12,
       dockBottom: 68,
-      mapControlBottom: 120
+      mapControlBottom: 126
     });
     expect(resolveMobileWorkbenchOverlayLayout(false)).toEqual({
       timelineBottom: 12,
       dockBottom: 12,
-      mapControlBottom: 64
+      mapControlBottom: 70
     });
   });
 
diff --git a/src/features/workbench/layout/workbench-layout.ts b/src/features/workbench/layout/workbench-layout.ts
index 750dc21..2e57b89 100644
--- a/src/features/workbench/layout/workbench-layout.ts
+++ b/src/features/workbench/layout/workbench-layout.ts
@@ -32,7 +32,7 @@ export const WORKBENCH_LAYOUT = {
   mobileOverlay: {
     edgeInset: 12,
     gap: 8,
-    dockHeight: 44,
+    dockHeight: 50, // 40px buttons + 4px padding and 1px border on each side.
     timelineSummaryHeight: 48
   }
 } as const;
diff --git a/src/features/workbench/map-workbench-page.tsx b/src/features/workbench/map-workbench-page.tsx
index a3a4d5f..d922564 100644
--- a/src/features/workbench/map-workbench-page.tsx
+++ b/src/features/workbench/map-workbench-page.tsx
@@ -1624,7 +1624,7 @@ function MapWorkbenchContent({
               <MapToolbar
                 items={toolbarItems}
                 orientation="horizontal"
-                className="h-11 min-w-0 flex-1 justify-center [&>div]:min-w-0 [&>div]:flex-1 [&>div>div]:hidden [&_button]:w-full"
+                className="min-w-0 flex-1 justify-center [&>div]:min-w-0 [&>div]:flex-1 [&>div>div]:hidden [&_button]:w-full"
               />
             ) : null}
             <button
diff --git a/tests/browser/map-control-alignment.e2e.ts b/tests/browser/map-control-alignment.e2e.ts
new file mode 100644
index 0000000..893ee95
--- /dev/null
+++ b/tests/browser/map-control-alignment.e2e.ts
@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import { mockAgentApi } from "./support/mock-agent-api";
+import { mockWorkbenchContext } from "./support/mock-workbench-context";
+
+for (const width of [1280, 375, 320]) {
+  test(`map control hover borders have symmetric spacing at ${width}px`, async ({ page }, testInfo) => {
+    await mockWorkbenchContext(page);
+    await mockAgentApi(page);
+    await page.route("**/city-model/manifest.json", (route) => route.fulfill({ status: 404 }));
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+
+    const zoomControls = page.getByRole("group", { name: "地图缩放", exact: true });
+    const toolbar = page.getByRole("navigation", { name: "地图工具", exact: true });
+    await expect(zoomControls).toBeVisible();
+    await expect(toolbar).toBeVisible();
+    await expect(zoomControls.getByRole("button").first()).toBeEnabled();
+
+    const surfaces = zoomControls.locator(".acrylic-control").or(toolbar);
+    await expect(surfaces).toHaveCount(3);
+    for (const surface of await surfaces.all()) {
+      const buttons = surface.getByRole("button");
+      for (const button of await buttons.all()) {
+        await button.hover();
+        const size = await button.boundingBox();
+        expect(size!.height).toBe(40);
+        if (width >= 1024 || (await zoomControls.getByRole("button").and(button).count()) > 0) {
+          expect(size!.width).toBe(40);
+        }
+      }
+
+      // Check all four outer edges, including the final row's bottom spacing.
+      const insets = await surface.evaluate((element) => {
+        const bounds = element.getBoundingClientRect();
+        const buttons = [...element.querySelectorAll("button")].map((button) => button.getBoundingClientRect());
+        return {
+          top: Math.min(...buttons.map((button) => button.top)) - bounds.top,
+          bottom: bounds.bottom - Math.max(...buttons.map((button) => button.bottom)),
+          left: Math.min(...buttons.map((button) => button.left)) - bounds.left,
+          right: bounds.right - Math.max(...buttons.map((button) => button.right))
+        };
+      });
+      expect.soft(insets).toEqual({ top: 5, bottom: 5, left: 5, right: 5 });
+    }
+
+    if (width < 1024) {
+      const zoomBounds = await zoomControls.boundingBox();
+      const toolbarBounds = await toolbar.boundingBox();
+      expect(toolbarBounds!.height).toBe(50);
+      expect(toolbarBounds!.y - (zoomBounds!.y + zoomBounds!.height)).toBe(8);
+    }
+
+    await zoomControls.getByRole("button", { name: "放大", exact: true }).hover();
+    await page.screenshot({ path: testInfo.outputPath("map-control-hover.png") });
+  });
+}