feat: update export dialog

src/components/ImageExportDialog.scss

@@ -58,12 +58,6 @@
         flex-grow: 1;
       }
 
-      &__filename {
-        & > input {
-          margin-top: 1rem;
-        }
-      }
-
       &__canvas {
         box-sizing: border-box;
         width: 100%;
@@ -115,6 +109,13 @@
         align-content: flex-start;
       }
 
+      &__filename {
+        & > input {
+          width: 100%;
+          box-sizing: border-box;
+        }
+      }
+
       &__setting {
         display: flex;
         flex-direction: row;

src/components/ImageExportDialog.tsx

@@ -128,13 +128,15 @@ const ImageExportModal = ({
         <div className="ImageExportModal__preview__canvas" ref={previewRef}>
           {renderError && <ErrorCanvasPreview />}
         </div>
-        <div className="ImageExportModal__preview__filename">
+      </div>
+      <div className="ImageExportModal__settings">
+        <h3>{t("imageExportDialog.header")}</h3>
+        <div className="ImageExportModal__settings__filename">
           {!nativeFileSystemSupported && (
             <input
               type="text"
               className="TextInput"
               value={projectName}
-              style={{ width: "30ch" }}
               disabled={
                 typeof appProps.name !== "undefined" || appState.viewModeEnabled
               }
@@ -149,9 +151,6 @@ const ImageExportModal = ({
             />
           )}
         </div>
-      </div>
-      <div className="ImageExportModal__settings">
-        <h3>{t("imageExportDialog.header")}</h3>
         {someElementIsSelected && (
           <ExportSetting
             label={t("imageExportDialog.label.onlySelected")}