[pancakereport]

Closes #84. Material Design Lite hasn't been maintained since 2016. #85 pointed the pages at a working copy of it, and #133 then hosted that copy in the repo, but both PRs left Bootstrap 5 as the long-term replacement. This PR makes that switch. The two vendor files are hosted in the repo the same way #133 hosted MDL. Google Fonts was the last thing pages loaded from another site, and it's gone too, so no page loads anything from another site now.

Changes

• server/static/vendor/bootstrap/: Bootstrap 5.3.8 (the latest 5.x), with bootstrap.min.css, bootstrap.bundle.min.js (includes Popper, which dropdowns and tooltips need), their source maps, and the MIT LICENSE. These are the dist/ files of the npm package bootstrap@5.3.8.
• server/static/vendor/bootstrap-icons/: Bootstrap Icons 1.13.1, with bootstrap-icons.min.css, its woff2/woff fonts, and the MIT LICENSE, from the npm package. These replace the Material Icons ligature font from Google Fonts. The newest version, 1.13.2, came out on Oct 8, which is too recent to adopt yet.
• server/static/vendor/material-design-lite/: removed. Roboto is gone as well, and the pages now use Bootstrap's system font stack.
• Templates: each MDL component is replaced with its Bootstrap counterpart:
  • Header: a navbar that folds into a menu button on narrow screens. The Rooms and user menus are Bootstrap dropdowns, which also fixes the old <a>-wrapped <li> markup.
  • Tabs (student import, room import, layout preview): nav-tabs, which work with the keyboard and carry tab/tabpanel ARIA roles.
  • Text fields: a form-label above a form-control. Floating labels were dropped. Several checkbox labels pointed at a wrapper div instead of the input, so clicking the label did nothing. They now point at the input itself.
  • Buttons: btn btn-primary for main actions, btn-outline-* for secondary ones, and danger for deleting.
  • Lists and tables: list-group and table.
  • Icon actions (edit, delete, star, etc.): these used to be <div onclick>. They're now real <a> or <button> elements with aria-labels, so they can be reached with the keyboard.
• Tooltips: a single delegated Bootstrap tooltip in utils.js covers every page.
  • Seats: they still keep their tooltip content (name, attributes, photo, SID) in a hidden .seat-tooltip placed right after the seat. Since tooltips now open on focus as well as hover, the layout preview's seat buttons show theirs from the keyboard.
  • Photos: a seat's photo still loads only when its tooltip opens.
  • Students page toolbar: its tooltips use data-bs-title.
• Flash messages: these are now dismissible Bootstrap alerts. The app's error category maps to Bootstrap's danger.
• Headings: the course/exam name in the header is now the page's h1. Page headings were shifted down two levels (<h4> → <h2 class="h4">, and so on) so they still look the same but no longer skip levels, which the axe tests check for.
• CSS:
  • Removed: all MDL-specific rules.
  • Smooth scrolling: Bootstrap turns it on, and this PR turns it back off. With it on, Selenium clicked elements before they finished scrolling into view.
  • Berkeley colors: Berkeley Blue (#003262) replaces Bootstrap's blue everywhere it appears: the header, buttons, links, tabs, checkboxes, focus rings and the dropdown's active item. A California Gold (#FDB515) line runs under the header, and a gold underline marks the hovered nav link. These are the values layout_preview.css already cites from brand.berkeley.edu. Bootstrap's prebuilt CSS hard-codes its blue in several components, so style.css overrides each one the pages use.
  • Links in sentences: these are underlined. Berkeley Blue is too close to the body text color to mark a link by color alone.
  • Background: the page background is white (Bootstrap's default) rather than the old #f7f7f7.
  • Navbar links: they're full white instead of Bootstrap's 55%, which was hard to read on the blue.

Tests

Some tests matched MDL markup, so they were updated to match the new markup: list-item links, tooltip markup, button classes, the recipients note, the tab selector, and the Front/Back headings. One test checked that the assign bar sticks while scrolling. MDL scrolled an inner container, while Bootstrap scrolls the window, so the test now scrolls the window.

Not in this PR

• Bootstrap 6: it's still in alpha.
• Seat map colors: occupied, highlighted and selected seats keep their existing colors.
• Students table on phones: it still squeezes its columns, as it did before.
• Fixed-seat tooltips from the keyboard: a staff member tabbing to a fixed seat focuses the link around the seat rather than the seat itself, so its tooltip still only opens on hover.

Testing

• Test suites: unit, e2e and a11y all pass locally (422).
• Screenshots: I checked these pages in headless Chrome against a local seeded server: the offering list, the exam list, the exam's rooms, students, student import, assign, room, email and layout preview pages. On the room page, the seat tooltip showed the student's photo and the Rooms dropdown worked. At 420px wide, the navbar folded into the menu button and expanded when tapped.
• Not checked by hand: the room import page, because it needs Google credentials that I don't have locally. Its template is still covered by the render tests.

🤖 Generated with Claude Code

[github-actions]

🚀 Staging Preview Deployed!

URL: https://preview-seating-pr-146-137456085712.us-west1.run.app

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.01%. Comparing base (a6260f2) to head (f9e8809).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #146   +/-   ##
=======================================
  Coverage   80.01%   80.01%           
=======================================
  Files          31       31           
  Lines        2442     2442           
=======================================
  Hits         1954     1954           
  Misses        488      488           

Flag	Coverage Δ
e2e	33.87% <ø> (ø)
unit	80.01% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pancakereport]

Feels like big visual changes. I'm going to merge now and fix things I don't like later when I go through things with a fine-toothed comb for a11y purposes.

[cycomachead]

Cool!

One thing you can do, tell claude to upload screenshots of the app to PRs. :)