Fix profile page horizontal overflow on mobile

[Copilot]

PR #255 introduced mobile-friendly styling but used fixed padding/spacing values that, when nested across multiple containers, pushed content beyond the viewport on small screens.

Container overflow constraints (styles.js)

• LayoutContainer / InnerContainer / ProfileContainer: added overflowX: hidden, maxWidth: 100%, boxSizing: border-box
• InnerContainer: width: 100% on mobile (was fixed 95%)

Responsive padding & spacing (Profile.js, sub-components)

• ProfileContainer horizontal padding: px: { xs: 1, sm: 2, md: 4 } (was isMobile ? 2 : 4)
• Tab content area: p: { xs: 1, sm: 3 } with overflow: hidden
• All Grid containers: spacing={{ xs: 2, sm: 3 }} instead of fixed spacing={3} / spacing={4}
• Paper components in RaffleEntries, GitHubContribution, ShareableGitHubContributions: p: { xs: 2, sm: 3 }

Text & content overflow

• ShareableGitHubContributions: wordBreak: 'break-word' on repo name list
• GitHubContribution: responsive heading font size, flexShrink: 0 on icon, chip grid xs: 6 for 2-col mobile layout
• feedback-lite: flexWrap: wrap + smaller icon size on mobile for 10-heart rating rows
• profile-grid.css: max-width: 100% on .profile__details mobile breakpoint

Verified

Programmatically confirmed zero horizontal overflow at both 375px (iPhone) and 320px (iPhone SE) viewports.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdn.ohack.dev
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/frontend-ohack.dev/frontend-ohack.dev/node_modules/next/dist/server/lib/start-server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontend-ohack-dev	Ready	Preview	Mar 14, 2026 5:34pm

[gregv]

@copilot can you review this section that shows hearts as it does not look good on mobile now: What
Public
What you've completed for nonprofits
Productionalized Projects: The number of projects that have been operationalized.