fix: ImageExportDialog on mobile

src/components/ImageExportDialog.scss

@@ -122,9 +122,14 @@
       }
 
       &__filename {
+        width: 100%;
+        text-align: center;
+
         & > input {
           width: 100%;
           box-sizing: border-box;
+          max-width: 30em;
+          margin-bottom: 1em;
         }
       }
 
@@ -162,6 +167,13 @@
           display: flex;
           height: 100%;
           align-items: center;
+          gap: 1em;
+
+          &--multipleInputs {
+            @include isMobile {
+              flex-direction: row-reverse;
+            }
+          }
         }
       }
 

src/components/ImageExportDialog.tsx

@@ -268,6 +268,7 @@ const ImageExportModal = ({
         <ExportSetting
           label={t("imageExportDialog.label.withBackground")}
           name="exportBackgroundSwitch"
+          multipleInputs
         >
           {exportWithBackground && (
             <Select
@@ -399,6 +400,7 @@ type ExportSettingProps = {
   children: React.ReactNode;
   tooltip?: string;
   name?: string;
+  multipleInputs?: boolean;
 };
 
 const ExportSetting = ({
@@ -406,6 +408,7 @@ const ExportSetting = ({
   children,
   tooltip,
   name,
+  multipleInputs,
 }: ExportSettingProps) => {
   return (
     <div className="ImageExportModal__settings__setting" title={label}>
@@ -420,7 +423,12 @@ const ExportSetting = ({
           </Tooltip>
         )}
       </label>
-      <div className="ImageExportModal__settings__setting__content">
+      <div
+        className={clsx("ImageExportModal__settings__setting__content", {
+          "ImageExportModal__settings__setting__content--multipleInputs":
+            multipleInputs,
+        })}
+      >
         {children}
       </div>
     </div>

src/components/Select.scss

@@ -3,7 +3,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0 15px;
     line-height: 1;
     gap: 5px;
     background: transparent;