Merge pull request #684 from codeforpdx/issue-682/documents-styling-f…

…ixes [Enhancement] - Issue 682/documents styling fixes
codeforpdx · Nov 13, 2024 · ce55cd2 · ce55cd2
2 parents 6f49b99 + 25c0c30
commit ce55cd2
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 62 deletions.
diff --git a/src/components/Contacts/ContactListTable.jsx b/src/components/Contacts/ContactListTable.jsx
@@ -35,6 +35,7 @@ const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, a
   const contactWebIds = contacts.map(({ webId }) => webId);
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   const handleSendMessage = (contactId) => {
     setShowMessageModal(!showMessageModal);
@@ -55,7 +56,7 @@ const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, a
         minHeight: '500px'
       }}
     >
-      {isSmallScreen ? (
+      {isSmallScreen || isSmallScreenHeight ? (
         <ContactListTableMobile
           data-testid="ContactListTableMobile"
           contacts={contacts}

diff --git a/src/components/Documents/DocumentTable.jsx b/src/components/Documents/DocumentTable.jsx
@@ -37,6 +37,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
   const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
 
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   /**
    * Handles the local display of a document by opening it in a new window.
@@ -98,7 +99,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
       }}
       data-testid="document-table"
     >
-      {isMobile ? (
+      {isMobile || isSmallScreenHeight ? (
         <DocumentsMobile documents={documents} handlers={handlers} data-testid="documents-mobile" />
       ) : (
         <DocumentsDesktop

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -21,6 +21,7 @@ import RenderCopyrightAndLinksSection from './RenderCopyrightAndLinksSection';
 const Footer = () => {
   const theme = useTheme();
   const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   return (
     <Box
@@ -38,14 +39,18 @@ const Footer = () => {
     >
       <Stack
         alignItems="center"
-        direction={isReallySmallScreen ? 'column' : 'row'}
-        spacing={isReallySmallScreen ? 1 : 4}
+        direction={isReallySmallScreen || isSmallScreenHeight ? 'column' : 'row'}
+        spacing={isReallySmallScreen || isSmallScreenHeight ? 1 : 4}
         divider={
           <Divider
-            orientation={isReallySmallScreen ? 'horizontal' : 'vertical'}
-            flexItem={isReallySmallScreen ? null : true}
+            orientation={isReallySmallScreen || isSmallScreenHeight ? 'horizontal' : 'vertical'}
+            flexItem={isReallySmallScreen || isSmallScreenHeight ? null : true}
             color={theme.palette.primary.main}
-            sx={isReallySmallScreen ? { height: '3px', width: 3 / 4 } : { width: '3px' }}
+            sx={
+              isReallySmallScreen || isSmallScreenHeight
+                ? { height: '3px', width: 3 / 4 }
+                : { width: '3px' }
+            }
           />
         }
       >

diff --git a/src/layouts/Breadcrumbs.jsx b/src/layouts/Breadcrumbs.jsx
@@ -36,7 +36,11 @@ const Breadcrumbs = () => {
     <MUIBreadcrumbs
       aria-label="breadcrumb"
       separator={<NavigateNextIcon fontSize="small" />}
-      sx={{ margin: { xs: '20px', sm: '20px 80px' } }}
+      sx={{
+        margin: { xs: '20px', sm: '20px 80px' },
+        wordWrap: 'break-word',
+        overflowWrap: 'break-word'
+      }}
     >
       {crumbs.map((crumb, index) =>
         index !== crumbs.length - 1 ? (
@@ -47,11 +51,20 @@ const Breadcrumbs = () => {
               .replaceAll(' ', '-')
               .toLowerCase()}`}
             key={crumb}
+            style={{
+              wordBreak: 'break-word'
+            }}
           >
             {crumb}
           </Link>
         ) : (
-          <Typography component="h2" key={crumb}>
+          <Typography
+            component="h2"
+            key={crumb}
+            sx={{
+              wordBreak: 'break-word'
+            }}
+          >
             {crumb}
           </Typography>
         )

diff --git a/src/pages/Documents.jsx b/src/pages/Documents.jsx
@@ -28,6 +28,7 @@ const Documents = () => {
   const { setContact } = useContext(DocumentListContext);
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   // Documents related states
   const { session } = useSession();
@@ -107,7 +108,7 @@ const Documents = () => {
           size="small"
           onClick={() => handleAclPermissionsModal('container')}
           sx={{
-            width: isSmallScreen ? '165px' : '200px',
+            width: isSmallScreen || isSmallScreenHeight ? '165px' : '200px',
             borderColor: 'primary.main',
             padding: '6px 12px'
           }}
@@ -119,7 +120,10 @@ const Documents = () => {
           color="primary"
           size="small"
           onClick={() => setShowAddDocModal(true)}
-          sx={{ width: isSmallScreen ? '140px' : '180px', padding: '6px 12px' }}
+          sx={{
+            width: isSmallScreen || isSmallScreenHeight ? '140px' : '180px',
+            padding: '6px 12px'
+          }}
         >
           Add Document
         </Button>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -27,7 +27,8 @@ import { HomeSection, KeyFeatures } from '@components/Home';
 const Home = () => {
   const theme = useTheme();
   const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-  const iconSize = isReallySmallScreen ? 'medium' : 'large';
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
+  const iconSize = isReallySmallScreen || isSmallScreenHeight ? 'medium' : 'large';
   const aboutRef = useRef(null);
 
   const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -45,64 +46,70 @@ const Home = () => {
   );
   const subheading = 'Personal Access System for Services';
 
-  const logoSection = isReallySmallScreen ? (
-    <Typography component="h1" color="primary">
-      <Stack
-        component="span"
-        justifyContent="center"
-        alignItems="center"
-        spacing={2}
-        mb={2}
-        data-testid="testStack"
-      >
-        <Typography
-          color="primary.text"
-          variant="h1"
-          component="span"
-          fontWeight="500"
-          fontSize="72px"
-        >
-          {heading}
-        </Typography>
-        <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="50%" />
-        <Typography color="primary.text" variant="h4" component="span" fontWeight="600" mb={8}>
-          {subheading}
-        </Typography>
-      </Stack>
-    </Typography>
-  ) : (
-    <Typography component="h1" color="primary.text">
-      <Stack
-        justifyContent="center"
-        alignItems="center"
-        spacing={4}
-        mb={18}
-        data-testid="testStack"
-      >
+  const logoSection =
+    isReallySmallScreen || isSmallScreenHeight ? (
+      <Typography component="h1" color="primary">
         <Stack
           component="span"
-          direction="row"
           justifyContent="center"
           alignItems="center"
-          spacing={4}
+          spacing={2}
+          mb={2}
+          data-testid="testStack"
         >
-          <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
           <Typography
             color="primary.text"
             variant="h1"
             component="span"
             fontWeight="500"
-            fontSize="144px"
+            fontSize="72px"
           >
             {heading}
           </Typography>
+          <Box
+            component="img"
+            src="/assets/PASSLogolightmode.png"
+            alt=""
+            width={isSmallScreenHeight ? '20%' : '50%'}
+          />
+          <Typography color="primary.text" variant="h4" component="span" fontWeight="600" mb={8}>
+            {subheading}
+          </Typography>
         </Stack>
-        <Typography color="primary.text" variant="h3" component="span" fontWeight="600">
-          {subheading}
-        </Typography>
-      </Stack>
-    </Typography>
-  );
+      </Typography>
+    ) : (
+      <Typography component="h1" color="primary.text">
+        <Stack
+          justifyContent="center"
+          alignItems="center"
+          spacing={4}
+          mb={18}
+          data-testid="testStack"
+        >
+          <Stack
+            component="span"
+            direction="row"
+            justifyContent="center"
+            alignItems="center"
+            spacing={4}
+          >
+            <Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
+            <Typography
+              color="primary.text"
+              variant="h1"
+              component="span"
+              fontWeight="500"
+              fontSize="144px"
+            >
+              {heading}
+            </Typography>
+          </Stack>
+          <Typography color="primary.text" variant="h3" component="span" fontWeight="600">
+            {subheading}
+          </Typography>
+        </Stack>
+      </Typography>
+    );
 
   return (
     <Container sx={{ width: '100vw' }}>
@@ -135,7 +142,7 @@ const Home = () => {
             </Box>
             <div ref={aboutRef}>
               <HomeSection
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 componentImageSrc="/assets/web-security-blue.webp"
                 componentImageAlt=""
                 title="Keep Your Documents Safe and Secure Using Decentralized Technology"
@@ -145,33 +152,33 @@ const Home = () => {
                 hasMargin
               />
               <HomeSection
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 componentImageSrc="/assets/app-blue.webp"
                 componentImageAlt=""
                 title="An App for Caseworkers"
                 description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them."
                 hasMargin
               />
               <HomeSection
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 componentImageSrc="/assets/key-features-blue.webp"
                 componentImageAlt=""
                 title="Key Features"
               />
               <KeyFeatures
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 icon={<SecurityIcon fontSize={iconSize} />}
                 title="Secure Storage"
                 description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format."
               />
               <KeyFeatures
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 icon={<Diversity1Icon fontSize={iconSize} />}
                 title="Nonprofit-Caseworker Integration"
                 description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely."
               />
               <KeyFeatures
-                isReallySmallScreen={isReallySmallScreen}
+                isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
                 icon={<SupportIcon fontSize={iconSize} />}
                 title="Support Service"
                 description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services."

diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
@@ -135,6 +135,7 @@ const Profile = () => {
         alignItems: 'center',
         width: '100%',
         height: isSmallScreen ? 'auto' : '60dvh',
+        minHeight: '500px',
         margin: '20px auto',
         justifyContent: 'center'
       }}