diff --git a/src/components/ImageExportDialog.scss b/src/components/ImageExportDialog.scss
index 093e1a76f..bb64fb1e6 100644
--- a/src/components/ImageExportDialog.scss
+++ b/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;
diff --git a/src/components/ImageExportDialog.tsx b/src/components/ImageExportDialog.tsx
index 960c87f2d..d8d7a0864 100644
--- a/src/components/ImageExportDialog.tsx
+++ b/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")}