Fixed buttons layout

Author: Aviral09

src/component/modals/FileEdit.jsx

@@ -97,8 +97,8 @@ const FileEditModal = ({ superState, dispatcher }) => {
             closeModal={close}
             title={fileName}
         >
-            <div className="File Edit Container">
-                <div className="footer">
+            <div>
+                <div className="save-bar">
                     {fileName
                         && (
                             <button type="submit" className="btn btn-primary" onClick={submit}>Save</button>
@@ -110,11 +110,7 @@ const FileEditModal = ({ superState, dispatcher }) => {
                         <button type="submit" className="btn btn-primary" onClick={saveSubmit}>Save As</button>
                     )}
                 </div>
-                <div
-                    style={{
-                        minHeight: '400px',
-                    }}
-                >
+                <div className="setting-container">
                     <Editor
                         value={codeStuff}
                         onValueChange={(e) => setCodeStuff(e)}
@@ -124,11 +120,23 @@ const FileEditModal = ({ superState, dispatcher }) => {
                             fontFamily: '"Arial"',
                             fontSize: 16,
                             minHeight: '100vh',
-                            minWidth: '80vw',
+                            minWidth: '90vw',
                             border: '1px solid black',
                         }}
                     />
                 </div>
+                <div className="save-bar">
+                    {fileName
+                        && (
+                            <button type="submit" className="btn btn-primary" onClick={submit}>Save</button>
+                        )}
+                    {dirButton && (
+                        <button type="submit" className="btn btn-primary" onClick={saveAsSubmit}>Save As</button>
+                    )}
+                    {!dirButton && (
+                        <button type="submit" className="btn btn-primary" onClick={saveSubmit}>Save As</button>
+                    )}
+                </div>
             </div>
         </Modal>
     );

src/component/modals/file-edit.css

@@ -1,38 +1,26 @@
 .setting-container{
     display: grid;
     grid-template-columns: auto auto;
-    grid-gap: 20px;
-    margin: 20px;
+    grid-gap: 0px;
+    margin: 0px;
     width: 90vw;
+    min-height: '400px',
 }
 
-.setting-container .footer{
+.save-bar{
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
     justify-content: flex-end;
-    padding: .75rem;
-    border-top: 1px solid #dee2e6;
-    border-bottom-right-radius: calc(.3rem - 1px);
-    border-bottom-left-radius: calc(.3rem - 1px);
-    grid-column: 1/3;
+    margin-bottom: 5px;
+    margin-top: 5px;
 }
 
-.setting-container .footer>* {
-    margin: .25rem;
-}
-
-.setting-container .error{
-    color: #ff0000;
-    text-align: center;
-    grid-column: 1/3;
+.save-bar .btn {
+    margin-right: 5px;
 }
 
 @media screen and (max-width: 890px) {
     .setting-container{
         grid-template-columns: auto;
     }
-    .setting-container .footer{
-        grid-column: 1/2;
-    }
 }