diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 50014fc4f..22d0cc274 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -3059,10 +3059,10 @@ export function RealtimeCanvasDialog({
           className="hidden"
           onChange={handleSketchUpload}
         />
-        <div className="absolute bottom-4 left-1/2 z-30 flex w-[min(460px,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-2.5 pointer-events-none">
+        <div className="absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-2.5 pointer-events-none">
           <TooltipProvider delayDuration={120}>
-            <div className="pointer-events-auto flex max-w-full items-center gap-2 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
+            <div className="pointer-events-auto flex w-full flex-wrap items-center justify-center gap-1.5">
+              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3183,7 +3183,7 @@ export function RealtimeCanvasDialog({
                 </Tooltip>
               </div>
 
-              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
+              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <Popover>
                     <TooltipTrigger asChild>
@@ -3249,7 +3249,7 @@ export function RealtimeCanvasDialog({
                 </Tooltip>
               </div>
 
-              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
+              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3323,7 +3323,7 @@ export function RealtimeCanvasDialog({
                 </Tooltip>
               </div>
 
-              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
+              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button