Improve mobile responsiveness across the site

[llamavert]

Summary

Wide-ranging mobile responsiveness improvements across the site, alongside standardising staff page feedback to use the Toast component and updated the Dropdown component with section headers and icon support.

Changes Made

• Made the Changelog, Contribution Dashboard, Account page, ContributeDetails, GlobalStatus, AirportPointEditor, Staff Dashboard and division pages responsive across all viewport sizes
• Enhanced Dropdown component to support section header items (isHeader) and per-option icons
• Added a mobile nav dropdown to the Staff Dashboard that replaces the sidebar on small screens, grouping tools into labelled sections
• Replaced all inline error/success banners in staff components with the Toast component
• Added open prop to Tooltip for programmatic visibility; TruncatedName in UserManagement now toggles tooltip on click
• Removed the preview tab selector from the Hero section, simplified to a single video placeholder
• Minor home section tweaks: Documentation badge colour changed to red, Support section background blur removed, doc card icon changed to neutral

Additional Information

Author Information

Discord Username:
VATSIM CID:

---

Checklist:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

[greptile-apps]

Greptile Summary

This is a wide-ranging mobile responsiveness and UX polish PR. The core changes — responsive breakpoints across ~40 files, Toast migration in staff components, the Dropdown header/icon enhancement, and the mobile nav in StaffDashboard — are well-executed and consistent. One functional issue stands out: the new contribution policy fetch is tightly coupled to the airport fetch via Promise.all, which can silently break the entire ContributeDetails page if the policy endpoint has any hiccups.

Key changes:

• Responsive layouts added across all major pages (Account, Changelog, ContributionDashboard, GlobalStatus, StaffDashboard, etc.) using flex-col/sm:flex-row patterns and full-width-on-mobile inputs/buttons.
• All inline error/success banners in staff components replaced with the shared Toast component.
• Dropdown enhanced with isHeader section labels and per-option icon support; Tooltip gains a programmatic open prop.
• StaffDashboard sidebar hidden on mobile, replaced by a grouped Dropdown nav.
• marked.setOptions correctly migrated to marked.use() for compatibility with marked v17.
• New fetchContributionPolicy utility and disabled-contributions banner in ContributeDetails.
• Substantial ImageOverlayTool component added to AirportPointEditor (drag/resize/rotate/lock).

Issues found:

• fetchContributionPolicy is called inside Promise.all with the airport fetch in ContributeDetails.jsx. Any policy API failure will cause the airport data to silently fail to load too, leaving the user on a blank page with no error message.
• Dropdown container is missing overflow-hidden after the per-item rounded-corner classes were removed; hover states will visually clip outside the container radius.
• The "Reset" button in BanManagement was removed to fit the tightened grid, leaving no easy way to clear the form fields."

Confidence Score: 4/5

Mostly safe to merge; one P1 in ContributeDetails where a failing policy API silently breaks the airport page should be resolved first.

The vast majority of changes are straightforward, low-risk responsive layout tweaks and Toast migrations. The single P1 (Promise.all coupling in ContributeDetails) is isolated and has a clear, simple fix. The remaining findings are P2 style/UX items that do not block functionality.

src/pages/ContributeDetails.jsx — policy fetch must not break the airport data load on failure.

Important Files Changed

Filename	Overview
src/pages/ContributeDetails.jsx	Contribution policy fetch bundled into Promise.all with airport fetch — a policy API failure will silently break the entire page load.
src/utils/contributionPolicy.js	New utility for fetching and messaging contribution policy; throws on any non-ok response, which is fine if callers handle errors gracefully.
src/components/shared/Dropdown.jsx	Added header items and per-option icons; first/last rounded-corner classes removed without adding overflow-hidden to the container — minor visual regression.
src/pages/StaffDashboard.jsx	Mobile nav Dropdown built from memoized grouped TABS, sidebar hidden below md — well-structured responsive approach.
src/components/staff/BanManagement.jsx	Switched error/success banners to Toast, added Card wrapping; Reset button removed with no replacement, reducing form usability.
src/pages/Changelog.jsx	Timeline sidebar hidden on mobile with inline date label shown instead; marked.setOptions migrated to marked.use() for v17 compatibility.
src/pages/ContributionDashboard.jsx	Leaderboard and contributions list reordered for mobile with order utilities; contributor names now truncate instead of overflowing.
src/components/divisions/AirportPointEditor.jsx	Large ImageOverlayTool added with drag/resize/rotate/lock; substantial new feature on top of this PR's stated scope.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: src/pages/ContributeDetails.jsx
Line: 71-74

Comment:
**Policy API failure silently breaks the entire page**

`fetchContributionPolicy` throws on any non-`ok` response (404, 500, network error). Because it is inside `Promise.all`, a single failure from the policy endpoint causes the whole `Promise.all` to reject. The outer `catch` block only calls `console.error`, so neither the airport data nor any visible error message is shown to the user — they get a blank/loading page with no indication of what went wrong.

The policy fetch is a best-effort enhancement; the airport page should still work even if that endpoint is unavailable. Consider using `Promise.allSettled` so the airport fetch is independent:

```js
const [airportResult, policyResult] = await Promise.allSettled([
  fetch(`https://v2.stopbars.com/airports?icao=${icao}`),
  fetchContributionPolicy(icao),
]);

if (policyResult.status === 'fulfilled') {
  setContributionPolicy(policyResult.value);
}

if (airportResult.status === 'fulfilled' && airportResult.value.ok) {
  const data = await airportResult.value.json();
  setAirport({ ... });
}
```

Alternatively, wrap `fetchContributionPolicy` in its own `try/catch` inside the existing block so a policy failure never propagates to the outer `catch`.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: src/components/shared/Dropdown.jsx
Line: 76

Comment:
**Missing `overflow-hidden` after removing per-item rounded corners**

The original items carried `first:rounded-t-lg last:rounded-b-lg` so hover backgrounds clipped neatly to the container's `rounded-lg`. Those classes were removed (correctly, now that header `<div>`s can sit between items), but without `overflow-hidden` on the container, the `hover:bg-zinc-700` of the first/last `<button>` will visually bleed through the container's border-radius.

```suggestion
          <div className="absolute z-50 w-full mt-1 bg-zinc-800 border border-zinc-700 rounded-lg shadow-lg overflow-hidden animate-in fade-in-0 zoom-in-95 duration-200">
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: src/components/staff/BanManagement.jsx
Line: 288-296

Comment:
**Reset button removed with no replacement**

The previous layout had a "Reset" button next to "Ban" that cleared all three form fields. This was dropped when the grid was tightened to `md:col-span-1`. Users must now manually clear the VATSIM CID, Reason, and Expires At fields after each ban action. Even a small icon-only button (e.g. `X`) would restore that convenience.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "Merge branch 'design/responsive-overhaul..." | Re-trigger Greptile}