feat: new image editor ui

Author: cshum

web/src/pages/image-editor-page.tsx

@@ -726,7 +726,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
 
           {/* Single Column - Stacked sections */}
           <div className='bg-background flex flex-col overflow-hidden border-l'>
-            <div className='flex-1 touch-pan-y overflow-y-auto overscroll-y-contain p-3 select-none'>
+            <div className='flex-1 touch-pan-y overflow-y-auto overscroll-y-contain p-3 select-none scrollbar-gutter-stable'>
               <ImageEditorControls
                 key={resetCounter}
                 imageEditor={imageEditor}
@@ -1178,7 +1178,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
         >
           {/* Left Column */}
           <div className='bg-background flex flex-col overflow-hidden border-r'>
-            <div className='flex-1 touch-pan-y overflow-y-auto overscroll-y-contain p-3 select-none'>
+            <div className='flex-1 touch-pan-y overflow-y-auto overscroll-y-contain p-3 select-none scrollbar-gutter-stable'>
               <ImageEditorControls
                 key={`left-${resetCounter}`}
                 imageEditor={imageEditor}
@@ -1231,7 +1231,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
 
           {/* Right Column */}
           <div className='bg-background flex flex-col overflow-hidden border-l'>
-            <div className='flex-1 touch-pan-y overflow-y-auto overscroll-y-contain p-3 select-none'>
+            <div className='flex-1 touch-pan-y overflow-y-auto overscroll-y-contain p-3 select-none scrollbar-gutter-stable'>
               <ImageEditorControls
                 key={`right-${resetCounter}`}
                 imageEditor={imageEditor}