Show read-only header badge for shared links and refine header/layout styles

[alvin000009238]

Motivation

• Indicate when a dashboard is opened via a shared link by showing a persistent read-only status in the header and hide interactive controls.
• Improve header spacing, sizing and responsive behavior so the title, subtitle and action buttons truncate and wrap more predictably on small screens.
• Avoid injecting DOM nodes from share.js and instead use an existing header badge element for simpler state updates.

Description

• Update frontend/share.js to set the text of #headerStatusBadge to 僅供檢視 when a shared link is loaded and keep the app in read-only mode instead of creating a new .share-indicator element.
• Add a .header-status-badge element to public/index.html inside the title/subtitle area and wire it with id="headerStatusBadge" for accessible live updates.
• Add and adjust CSS rules in frontend/styles/header.css, frontend/styles/responsive.css, frontend/styles/compatibility.css and frontend/styles/utilities.css to: tighten header paddings, update logo/icon sizes, enable truncation/ellipsis for title/subtitle, show/hide the status badge in body.read-only-mode, and improve mobile wrapping and spacing.
• Remove the old .readonly-badge rule from utilities.css and consolidate the visual read-only indicator to the new .header-status-badge styling.
• Update static asset references in public/index.html to point to the new built filenames for CSS and the main JS module.

Testing

• Ran a production build with npm run build and the build completed successfully.
• Ran the codebase lint step with npm run lint and it completed without errors.

---

Codex Task

[gemini-code-assist]

Code Review

This pull request implements several UI refinements to the header and read-only mode, improving responsiveness and accessibility. Key changes include transitioning from manual DOM manipulation for the share indicator to a structured status badge, optimizing header spacing, and adding ARIA labels to interactive elements. A review comment suggests adding a CSS fallback for the color-mix() function to support older browser versions.

I am having trouble creating individual review comments. Click here to see my feedback.

frontend/styles/header.css (204)

The color-mix() CSS function has limited support in older browsers (e.g., Safari < 16.2, Firefox < 113). To ensure graceful degradation for users on these browsers, it's good practice to provide a fallback. A simple solid color from your theme can serve as a good fallback, ensuring the badge remains readable even if the appearance is slightly different.

    background: var(--color-warning-muted); /* Fallback for older browsers */
    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);

[Copilot]

Pull request overview

Updates header/read-only styling to better support shared-link (read-only) views and consolidate related layout rules.

Changes:

• Adjusts .time-info layout in the header to a horizontal/centered presentation.
• Hides .time-label via header.css and removes now-redundant read-only overrides from compatibility.css.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
frontend/styles/header.css	Updates header time block layout and hides the time label.
frontend/styles/compatibility.css	Removes read-only-mode overrides for time label/info from legacy compatibility styles.

---

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

[Copilot]

.time-label is now permanently hidden (display: none) for all modes. Previously this label was only hidden in read-only mode / small screens, so this change likely removes the “資料更新時間” context for normal usage and leaves a hidden DOM node in the header. If the intent is to hide it only for shared links, scope the rule under body.read-only-mode; otherwise consider removing the label element (and any redundant responsive rule) to avoid dead markup/styles.

Suggested change

	.time-label {
	body.read-only-mode .time-label {

[Copilot]

compatibility.css still contains a .share-indicator rule, but the shared-link flow no longer creates/uses that element (no matches outside this file). Since this PR explicitly moves the read-only indicator into the header badge, removing the leftover .share-indicator styles would prevent unused/dead CSS from accumulating.