Remove unnecessary horizontal scroll bar and add gap between bottom o…

…f page
sfbrigade · Sep 13, 2024 · 7f63adf · 7f63adf
1 parent 39dc663
commit 7f63adf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/client/src/pages/patients/PatientRegistration.jsx b/client/src/pages/patients/PatientRegistration.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { StatusCodes } from 'http-status-codes';
-import { Flex, Button, Modal, Text } from '@mantine/core';
+import { Flex, Button, Modal, Text, Container } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useForm, isNotEmpty } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
@@ -456,43 +456,45 @@ export default function PatientRegistration() {
 
   return (
     <main>
-      <h1>Register Patient</h1>
-      <Flex direction="column" gap="md">
-        <form onSubmit={form.onSubmit(submitPatient, handleErrors)}>
-          <Modal
-            opened={opened}
-            onClose={close}
-            title="Some Sections Haven't Been Viewed"
-            size="lg"
-          >
-            <Text>Please verify the sections below:</Text>
-            <ul>
-              {unvisitedSections.map((section) => (
-                <li key={section}>{section}</li>
-              ))}
-            </ul>
-          </Modal>
-          <PatientRegistrationAccordion
-            form={form}
-            initialMedicalData={initialMedicalData}
-            initialHospitalData={initialHospitalData}
-            initialPhysicianData={initialPhysicianData}
-            openedSection={openedSection}
-            handleAccordionChange={handleAccordionChange}
-          />
-          <Flex justify="center" mt="md">
-            <Button
-              onClick={form.onSubmit(submitPatient, handleErrors)}
-              color="gray"
-              fullWidth
-              loading={loading}
-              loaderProps={{ type: 'dots' }}
+      <Container style={{ marginBottom: '1rem' }}>
+        <h1>Register Patient</h1>
+        <Flex direction="column" gap="md">
+          <form onSubmit={form.onSubmit(submitPatient, handleErrors)}>
+            <Modal
+              opened={opened}
+              onClose={close}
+              title="Some Sections Haven't Been Viewed"
+              size="lg"
             >
-              Register Patient
-            </Button>
-          </Flex>
-        </form>
-      </Flex>
+              <Text>Please verify the sections below:</Text>
+              <ul>
+                {unvisitedSections.map((section) => (
+                  <li key={section}>{section}</li>
+                ))}
+              </ul>
+            </Modal>
+            <PatientRegistrationAccordion
+              form={form}
+              initialMedicalData={initialMedicalData}
+              initialHospitalData={initialHospitalData}
+              initialPhysicianData={initialPhysicianData}
+              openedSection={openedSection}
+              handleAccordionChange={handleAccordionChange}
+            />
+            <Flex justify="center" mt="md">
+              <Button
+                onClick={form.onSubmit(submitPatient, handleErrors)}
+                color="gray"
+                fullWidth
+                loading={loading}
+                loaderProps={{ type: 'dots' }}
+              >
+                Register Patient
+              </Button>
+            </Flex>
+          </form>
+        </Flex>
+      </Container>
     </main>
   );
 }
diff --git a/client/src/stories/Layout/layout.css b/client/src/stories/Layout/layout.css
@@ -1,7 +1,6 @@
 .layout {
   min-height: 100vh;
   min-height: 100dvh;
-  width: 100vw;
 
   display: grid;
   grid-template-rows: auto 1fr;