GitLab

<v-img cover min-height="100dvh"> was forcing v-responsive to size itself
to the image's natural aspect ratio (1692px wide × 2333/3500 ≈ 1128px tall),
making the page 1128px tall on a 769px viewport. The bottom ~360px had no
white overlay, so scrolling past the footer leaked the unwrapped image.

Replace <v-img> with a position:fixed <div class="app-bg"> using
background-image: cover, and move the white overlay from inline style to
scoped .app-content CSS. Page scrollHeight dropped 1128 → 781; max scroll
359 → 12 (just v-main's slight overflow).

Verified: background still renders washed-out behind content, edit dialog
opens correctly (pointer-events: none doesn't block v-overlay/v-dialog),
all routes still work.
Co-Authored-By: Claude <noreply@anthropic.com>

moved endpoints to /src/api; moved menu items to /src/components/constants/menuItems.js; added breadcrumbs; added Student page