fix(web): fix #1057 mobile navigation identity confirmation

[Owolabenjade]

Close #1057

This PR addresses issue #1057 where the top navigation bar (apps/web/components/Nav.tsx) hid the logged-in user's email address on small/mobile viewports (< 640px) because the email <span> was styled with Tailwind utility classes hidden sm:inline.

On narrow viewports (such as mobile screens), the navigation bar rendered only a generic "Log out" button and the active role link ("Bond dashboard" or "Surety admin"). This created identity ambiguity and UX friction when users switched between different importer or surety demo accounts on mobile devices, as there was no visible indicator of which account was currently authenticated.

Solution & Flow

• Modified apps/web/components/Nav.tsx to group the active role link and a mobile-specific user email element inside a column flexbox container (flex flex-col items-start leading-tight).
• Added a mobile-only element <span className="text-[11px] text-muted sm:hidden max-w-[130px] truncate" title={user.email}>{user.email}</span> rendered directly beneath the role link.
• Retained the existing desktop element <span className="hidden sm:inline text-muted">{user.email}</span> to preserve horizontal inline rendering on screens 640px (sm) and wider.

Value & Impact

This change resolves account switching confusion on mobile viewports for issue #1057 without introducing header clutter or altering desktop visual layout and responsive breakpoints.

Changed

• apps/web/components/Nav.tsx: Updated user section layout to display user.email beneath the dashboard role link on mobile viewports (sm:hidden) while preserving desktop inline behavior (hidden sm:inline), fixing Nav hides the logged-in user's email on mobile with no alternative way to confirm identity #1057.

Testing

The fix was verified using the following static analysis and build verification scripts:

# Verify TypeScript type definitions and component props
npm run typecheck --workspace=apps/web

# Verify zero ESLint warnings or code quality violations
npm run lint --workspace=apps/web

[drips-wave]

@Owolabenjade Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
tariff-shield-web	Error		Aug 27, 2026 5:28pm

[vercel]

Deployment failed for project tariff-shield-web with the following error:

The `vercel.json` schema validation failed with the following message: should NOT have additional property `rootDirectory`

Learn More: https://vercel.com/docs/concepts/projects/project-configuration