Header/share UI refactor: add header status badge, tweak header styles and responsiveness

[alvin000009238]

Motivation

• Provide a consistent, accessible indicator for read-only shared views and simplify how the badge is rendered.
• Improve header spacing, sizing and responsive behavior to avoid overflow and cramped layouts.

Description

• Replace dynamic DOM insertion of a .share-indicator in checkSharedLink() with a dedicated static element span#headerStatusBadge that is set to textContent = '僅供檢視' when a share link is loaded.
• Add .header-status-badge CSS and show it in read-only mode via body.read-only-mode .header-status-badge, remove the old .readonly-badge usage, and hide interactive buttons in read-only mode.
• Multiple header/style tweaks across header.css, responsive.css, utilities.css, and compatibility.css to adjust paddings, icon/logo sizes, gaps, flex rules, theme button sizing, and small-screen behaviors to prevent overflow and improve truncation.
• Update public/index.html to include the new header-status-badge element, add aria-label attributes to some header buttons for accessibility, and update the built asset filenames referenced for CSS/JS.

Testing

• Ran a production frontend build with npm run build and the build completed successfully.
• Executed the frontend unit tests with npm test and they passed.
• Ran linter checks with npm run lint and no issues were reported.

---

Codex Task

[gemini-code-assist]

Warning

Gemini encountered an error creating the review. You can try again by commenting /gemini review.

[Copilot]

Pull request overview

Refactors the “shared/read-only view” header indicator to use a static badge element and adjusts header styling/responsiveness to reduce overflow and improve small-screen layout.

Changes:

• Replaced dynamic .share-indicator DOM insertion with a static #headerStatusBadge that gets populated in shared-link mode.
• Added new .header-status-badge styling and removed the legacy .readonly-badge utility style.
• Tweaked header sizing/layout and responsive rules (gaps, flex behavior, button sizing, small-screen truncation).

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
public/index.html	Adds the static header status badge element and improves button accessibility labels; updates built asset filenames.
frontend/styles/utilities.css	Adjusts theme toggle sizing and removes the old .readonly-badge utility style.
frontend/styles/responsive.css	Updates header/data-time-box behavior on smaller screens to reduce overflow and improve wrapping.
frontend/styles/header.css	Adds styling for the new header status badge and adjusts header spacing/typography/truncation.
frontend/styles/compatibility.css	Adjusts read-only-mode visibility rules (no longer hides .time-info).
frontend/share.js	Populates the new #headerStatusBadge in shared-link (read-only) mode instead of injecting DOM.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

body.read-only-mode makes .header-status-badge visible immediately, but checkSharedLink() only sets headerStatusBadge.textContent after a successful fetch. During loading (and on 404/error before redirect) this can render a blank pill in the header. Set the badge text as soon as you enter read-only mode (before the fetch), or update the CSS to keep the badge hidden when it’s empty (e.g., :empty).