update

web_app/src/components/SidePanel/DiffusionOptions.tsx

@@ -441,8 +441,9 @@ const DiffusionOptions = () => {
           toolTip={toolTip}
           // disabled={disable}
         />
+        <div className="flex gap-4">
           <Slider
-          className="w-[110px]"
+            className="w-[120px]"
             defaultValue={[100]}
             min={10}
             max={100}
@@ -463,6 +464,7 @@ const DiffusionOptions = () => {
             }}
             // disabled={disable}
           />
+        </div>
       </RowContainer>
     )
   }
@@ -632,8 +634,10 @@ const DiffusionOptions = () => {
           text="Steps"
           toolTip="The number of denoising steps. More denoising steps usually lead to a higher quality image at the expense of slower inference."
         />
+
+        <div className="flex gap-4">
           <Slider
-          className="w-[110px]"
+            className="w-[120px]"
             defaultValue={[30]}
             min={1}
             max={100}
@@ -650,6 +654,7 @@ const DiffusionOptions = () => {
               updateSettings({ sdSteps: val })
             }}
           />
+        </div>
       </RowContainer>
     )
   }
@@ -662,8 +667,9 @@ const DiffusionOptions = () => {
           url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#guidance-scale"
           toolTip="Guidance scale affects how aligned the text prompt and generated image are. Higher value means the prompt and generated image are closely aligned, so the output is a stricter interpretation of the prompt"
         />
+        <div className="flex gap-4">
           <Slider
-          className="w-[110px]"
+            className="w-[120px]"
             defaultValue={[750]}
             min={0}
             max={1500}
@@ -682,6 +688,7 @@ const DiffusionOptions = () => {
               updateSettings({ sdGuidanceScale: val })
             }}
           />
+        </div>
       </RowContainer>
     )
   }
@@ -758,8 +765,9 @@ const DiffusionOptions = () => {
             text="Mask blur"
             toolTip="How much to blur the mask before processing, in pixels. Make the generated inpainting boundaries appear more natural."
           />
+          <div className="flex gap-4">
             <Slider
-            className="w-[110px]"
+              className="w-[120px]"
               defaultValue={[settings.sdMaskBlur]}
               min={0}
               max={96}
@@ -776,6 +784,7 @@ const DiffusionOptions = () => {
                 updateSettings({ sdMaskBlur: value })
               }}
             />
+          </div>
         </RowContainer>
         <Separator />
       </>
@@ -814,8 +823,9 @@ const DiffusionOptions = () => {
               text="Mask OP"
               toolTip="Expand or shrink mask. Using the slider to adjust the kernel size for dilation or erosion."
             />
+            <div className="flex gap-4">
               <Slider
-              className="w-[110px]"
+                className="w-[120px]"
                 defaultValue={[12]}
                 min={1}
                 max={100}
@@ -834,6 +844,7 @@ const DiffusionOptions = () => {
                   updateSettings({ adjustMaskKernelSize: val })
                 }}
               />
+            </div>
           </RowContainer>
 
           <RowContainer>