From 75cd5c20b6622d0419e75c3b1928fbc4cf87b092 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 7 Sep 2023 18:32:24 +0200
Subject: [PATCH] fix: ImageExportDialog on mobile

---
 src/components/ImageExportDialog.scss | 12 ++++++++++++
 src/components/ImageExportDialog.tsx  | 10 +++++++++-
 src/components/Select.scss            |  1 -
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageExportDialog.scss b/src/components/ImageExportDialog.scss
index d9ccd68b9..c08486e1a 100644
--- a/src/components/ImageExportDialog.scss
+++ b/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;
+            }
+          }
         }
       }
 
diff --git a/src/components/ImageExportDialog.tsx b/src/components/ImageExportDialog.tsx
index 2fcdd3c4a..fd1211171 100644
--- a/src/components/ImageExportDialog.tsx
+++ b/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>
diff --git a/src/components/Select.scss b/src/components/Select.scss
index 56f531585..b3073dd7f 100644
--- a/src/components/Select.scss
+++ b/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;