656: Padding fix from landing/dashboard page (mobile)

[naanci]

Description of changes

• there was overflowing padding, wrapped everything in a box to negate the parent's padding
• added overflowX and touchAction to prevent the wobbliness

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Screen.Recording.2026-01-23.at.2.59.48.AM.mov

Staging

Screen.Recording.2026-01-23.at.3.17.47.AM.mov

[github-actions]

Available PR Commands

• /ai - Triggers all AI review commands at once
• /review - AI review of the PR changes
• /describe - AI-powered description of the PR
• /improve - AI-powered suggestions
• /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

[github-actions]

Title

656: removed extra padding from landing/dashboard page on mobile

---

PR Type

Enhancement, Bug fix

---

Description

• Wrap pages with full-width Box container

• Prevent horizontal scroll wobble on mobile

• Normalize widths to 100% and viewport

• Replace divs with Mantine Box components

---

Diagram Walkthrough

flowchart LR
  A["Landing AboutUs layout"] -- "wrap with Box, 100vw, overflowX hidden" --> B["Stable mobile layout"]
  C["Dashboard layout"] -- "outer Box, 100vw, overflowX hidden" --> D["No extra padding/scroll"]
  E["Inline div padding -> Box"] -- "consistent Mantine components" --> F["Consistent spacing"]

Loading

File Walkthrough

Relevant files

Enhancement

AboutUs.tsx AboutUs mobile overflow and spacing fixes                                js/src/app/_component/AboutUs.tsx Wrap entire section in Box with 100vw and hidden overflow Replace inline divs with Box for padding Normalize widths to 100% and remove extra alignItems styling Adjust mobile/desktop containers to avoid horizontal scroll +24/-22  Dashboard.page.tsx Dashboard container refactor to prevent overflow                  js/src/app/dashboard/Dashboard.page.tsx Add outer Box with 100vw, overflowX hidden, touchAction pan-y Move layout into inner Flex with full width and min height Import and use Mantine Box Eliminate 98vw usage causing overflow +30/-28

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Layout Regression Wrapping the entire component in a full-viewport-width Box with negative horizontal margin and overflowX hidden may cause unintended clipping or horizontal scroll behaviors on certain browsers and when nested within other containers. Validate that focus outlines, tooltips, and any absolute-positioned elements are not clipped and that the negative margins do not break parent layouts. <Box mx="-lg" w="100vw" maw="100vw" style={{ overflowX: "hidden", touchAction: "pan-y", }} > <Flex direction={"row"} h={"92vh"} w={"100%"} visibleFrom="lg"> Accessibility Applying touchAction "pan-y" globally to the page wrapper can alter expected touch interactions (e.g., horizontal panning, nested carousels). Ensure this does not interfere with keyboard navigation, focus handling, or any components expecting horizontal gestures. <Box mx="-lg" w="100vw" maw="100vw" style={{ overflowX: "hidden", touchAction: "pan-y", }} > Responsive Consistency Switched mobile containers from 100vw to 100% and wrapped sections in Boxes; confirm no unexpected side effects on small devices with safe-area insets (iOS) and that hiddenFrom/visibleFrom combinations still produce correct spacing and alignment across breakpoints. <Flex h={"80vh"} w={"100%"} hiddenFrom="lg"> <Stack align={"center"} justify={"center"} h={"100%"} w={"100%"}> <Badge variant={"gradient"} gradient={{ from: "green", to: "cyan", deg: 90 }} size={"sm"} m={"md"} >

[naanci]

/deploy

[github-actions]

The command to deploy to staging for the commit ac43b1f has been triggered. View action run

[codecov]

Codecov Report

❌ Patch coverage is 83.33333% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...work/codebloom/utilities/ServerMetadataObject.java	75.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[github-actions]

Staging deployment succeeded for commit ac43b1f

View run

[naanci]

/deploy

[github-actions]

The command to deploy to staging for the commit 944f03c has been triggered. View action run

[github-actions]

Staging deployment succeeded for commit 944f03c

View run