Improve App Responsiveness

[mahid797]

Review and update all pages of the application to ensure responsiveness between tablet and desktop resolutions, following the Figma design. The primary focus is on layout adjustments and visual improvements so that the app is user-friendly on all relevant devices (tablet → desktop). Some responsiveness is in place, but each page must be re-checked.

Note: Work in tandem with Inconsistent Font Sizes and Colors Across the Application #65 to avoid duplication and ensure a unified design approach. Also, we must refine/update the globalTheme to properly handle responsive typography and spacing.

---

Tasks

General Tasks

• Replace fixed pixel sizes (e.g., px) with responsive units (%, rem, em) or MUI breakpoints (theme.breakpoints, sx).
• Refactor global styles and components to use the globalTheme for consistent spacing, typography, and colors—ensuring these scale properly at different breakpoints.
• Ensure that tables dynamically adjust row visibility based on screen height, with pagination for overflow rows.
• Add before/after screenshots or side-by-side comparisons for key breakpoints (sm, md, lg, xl) to confirm improvements.

Page-Specific Tasks

1. Documents Page

   • Make the table area responsive to different heights and widths; only show as many rows as the screen can display, then paginate the rest.
   • Verify alignment and spacing for different resolutions (tablet → desktop).
   • Use globalTheme breakpoints (theme.breakpoints) and MUI components for consistency.

2. Profile Page

   • Ensure avatar, form elements, and layouts are responsive (especially for tablet sizes ~600–900px).
   • Align spacing and layout with Figma designs, leveraging sx or MUI Grid/Stack for column/row responsiveness.
   • Update any hard-coded styling to use theme-based responsive values

3. Contacts Page

   • Dynamically adjust table rows/columns for responsiveness; consider MUI Grid or TableContainer with custom breakpoints.
   • Align headers, spacing, and layout with Figma design—using MUI Grid or Stack for alignment.
   • Check font sizes and colors align with globalTheme across breakpoints.

4. Document Details Page

   • Confirm responsiveness for headers, sub-headers, and content blocks.
   • Adjust typography or spacing using MUI’s theme.breakpoints to ensure no overflow at tablet widths.
   • Move any inline or px-based styles to the theme or MUI utility classes (sx prop).

---

Additional MUI Guidance

• MUI Grid / Stack

  • Prefer Grid for 2D layouts (e.g., columns + rows).
  • Use Stack for 1D layouts (vertical or horizontal stacking of elements), with responsive gap props.
  • Example with Grid:

    <Grid container spacing={2}>
      <Grid item xs={12} md={6}>
        {/* content */}
      </Grid>
      <Grid item xs={12} md={6}>
        {/* content */}
      </Grid>
    </Grid>

  • This automatically rearranges for tablet vs. desktop widths.

• GlobalTheme

  • Consider adding responsive typography options (if needed) or hooking into MUI’s responsive typography feature.
  • Centralize spacing values (e.g., theme.spacing(2)) instead of arbitrary padding: 16px;.

---

Screenshots and Testing

• Screenshots at each breakpoint (sm, md, lg, xl) to confirm the design matches Figma guidelines.
• Focus primarily on tablet → desktop (~600px → 1440px). We do not need xs (phone) or wide 4K screens for this issue.
• Documents page is highest priority, followed by Profile, Contacts, Document Details.

---

Notes

• Utilize MUI's predefined breakpoints for responsive adjustments:
  • xs (extra small): Below 600px
  • sm (small): 600px and above
  • md (medium): 900px and above
  • lg (large): 1200px and above
  • xl (extra large): 1536px and above
• Skip Teams and Settings pages as they are not priorities for the MVP. Auth Pages are also not a priority

---

Deliverables

• Updated Documents, Profile, Contacts, Document Details pages for tablet → desktop responsiveness.
• Screenshots showing each page at sm, md, lg, xl breakpoints.
• Refined globalTheme usage for responsive spacing and typography.
• Collaboration with Inconsistent Font Sizes and Colors Across the Application #65 to ensure typography and color changes are also responsive, unified, and consistent.