#2209 Footer cutting off Export Users on User page

frontend/src/components/Footer/styleFooter.ts

@@ -11,7 +11,7 @@ export const footerClasses = {
 };
 export const FooterRoot = styled('div')(({ theme }) => ({
   [`& .${footerClasses.footerBox}`]: {
-    position: 'absolute',
+    position: 'relative',
     bottom: 0,
     width: '100%',
     backgroundColor: theme.palette.primary.main

frontend/src/components/FooterOriginal.tsx

@@ -14,6 +14,7 @@ export const CrossfeedFooter: React.FC = () => {
         alignItems={'center'}
         justifyContent={'center'}
         style={{
+          position: 'fixed',
           margin: '0 auto',
           marginTop: '1rem',
           maxWidth: '1444px'

frontend/src/components/ImportExport/ImportExport.tsx

@@ -4,6 +4,7 @@ import { FileInput } from 'components';
 import { useAuthContext } from 'context';
 import Papa from 'papaparse';
 import * as FileSaver from 'file-saver';
+import * as FormStyles from './style';
 
 interface ImportProps<T> {
   // Plural name of the model.
@@ -26,6 +27,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 +87,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>
   );
 };
 

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'
+  }
+}));