fixed cutoff content on 'scans' page

cisagov · Sep 26, 2023 · a4ac2b5 · a4ac2b5
1 parent b0aa1f9
commit a4ac2b5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/frontend/src/components/Footer/styleFooter.ts b/frontend/src/components/Footer/styleFooter.ts
@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-import zIndex from '@mui/material/styles/zIndex';
 
 const PREFIX = 'Footer';
 
@@ -12,10 +11,9 @@ export const footerClasses = {
 };
 export const FooterRoot = styled('div')(({ theme }) => ({
   [`& .${footerClasses.footerBox}`]: {
-    position: 'fixed',
+    position: 'absolute',
     bottom: 0,
     width: '100%',
-    zIndex: 99999,
     backgroundColor: theme.palette.primary.main
   },
   [`& .${footerClasses.footerContainer}`]: {

diff --git a/frontend/src/components/ImportExport/ImportExport.tsx b/frontend/src/components/ImportExport/ImportExport.tsx
@@ -4,6 +4,8 @@ import { FileInput } from 'components';
 import { useAuthContext } from 'context';
 import Papa from 'papaparse';
 import * as FileSaver from 'file-saver';
+import { margin } from '@mui/system';
+import * as FormStyles from './style';
 
 interface ImportProps<T> {
   // Plural name of the model.
@@ -26,6 +28,9 @@ export interface ExportProps<T> {
 
 interface ImportExportProps<T> extends ImportProps<T>, ExportProps<T> {}
 
+const FormRoot = FormStyles.FormRoot;
+const importExportClasses = FormStyles.importExportClasses;
+
 export const Import = <T extends object>(props: ImportProps<T>) => {
   const { setLoading } = useAuthContext();
   const { name, onImport } = props;
@@ -83,16 +88,18 @@ export const exportCSV = async <T extends object>(
 export const Export = <T extends object>(props: ExportProps<T>) => {
   const { setLoading } = useAuthContext();
   return (
-    <form>
-      <h2>Export {props.name}</h2>
-      <Button
-        type="button"
-        outline
-        onClick={() => exportCSV(props, setLoading)}
-      >
-        Export as CSV
-      </Button>
-    </form>
+    <FormRoot>
+      <form className={importExportClasses.formExport}>
+        <h2>Export {props.name}</h2>
+        <Button
+          type="button"
+          outline
+          onClick={() => exportCSV(props, setLoading)}
+        >
+          Export as CSV
+        </Button>
+      </form>
+    </FormRoot>
   );
 };
 

diff --git a/frontend/src/components/ImportExport/style.ts b/frontend/src/components/ImportExport/style.ts
@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+
+const PREFIX = 'ImportExport';
+
+export const importExportClasses = {
+  formImport: `${PREFIX}-formImport`,
+  formExport: `${PREFIX}-formExport`
+};
+
+export const FormRoot = styled('form')(({ theme }) => ({
+  [`& .${importExportClasses.formExport}`]: {
+    marginBottom: '6rem'
+  }
+}));