fix: improve mobile workbench controls

features/map/core/components/notice.tsx

@@ -31,7 +31,7 @@ type SonnerPosition = NonNullable<ComponentProps<typeof Toaster>["position"]>;
 const DEFAULT_POSITION: MapNoticePosition = "top-center";
 
 const positionClassNames: Record<MapNoticePosition, string> = {
-  "top-center": "top-[84px]",
+  "top-center": "!left-1/2 !right-auto top-[84px] [translate:-50%_0]",
   "top-right": "top-[84px] right-[72px]",
   "bottom-left": "bottom-12 left-4",
   "bottom-right": "bottom-12 right-4"
@@ -120,7 +120,7 @@ export function showMapNotice(options: MapNoticeOptions) {
           MAP_ICON_CELL_RADIUS_CLASS_NAME
         )
       },
-      className: cn("!fixed !z-[60]", positionClassNames[position])
+      className: cn("!fixed !z-[60] !w-[min(420px,calc(100vw-24px))]", positionClassNames[position])
     }
   );
 }
@@ -232,7 +232,7 @@ function MapNoticeFrame({ tone, children }: { tone: MapNoticeTone; children: Rea
     <div
       role={tone === "error" || tone === "warning" ? "alert" : "status"}
       className={cn(
-        "relative flex w-[min(420px,calc(100vw-24px))] items-start gap-2.5 overflow-hidden border py-2.5 pl-3 pr-10 text-sm",
+        "relative flex w-full items-start gap-2.5 overflow-hidden border py-2.5 pl-3 pr-10 text-sm",
         MAP_READABLE_RADIUS_CLASS_NAME,
         toneClassNames[tone]
       )}