UI: show read-only header badge for shared links and refine header layout/responsive styles

[alvin000009238]

Motivation

• Indicate when a dashboard is opened via a shared (read-only) link using a compact header status instead of inserting a separate indicator element.
• Improve header spacing, alignment and responsiveness to avoid wrapping and truncation on small screens.
• Standardize button/icon sizes and update asset references for the built front-end bundle.

Description

• Updated checkSharedLink() to set the text of an existing #headerStatusBadge element for read-only state instead of inserting a new .share-indicator node.
• Added a span.header-status-badge with id headerStatusBadge to public/index.html and added aria-live="polite" for accessibility.
• Introduced .header-status-badge styles and toggled its visibility via body.read-only-mode in frontend/styles/header.css, and removed the old .readonly-badge usage.
• Multiple header and layout CSS adjustments across header.css, responsive.css, compatibility.css, and utilities.css to refine padding, gaps, flex behavior, icon/button sizes, truncation/ellipsis handling, and mobile breakpoints.
• Updated static asset references in public/index.html to the new hashed CSS and JS bundle filenames and added aria-label attributes to some header buttons.

Testing

• Built the front-end bundle locally using npm run build and verified the production assets were emitted successfully.
• Manually validated that opening a share link sets body.read-only-mode and that the #headerStatusBadge becomes visible and shows the expected text.
• Verified the layout across desktop and narrow viewports to confirm header alignment and truncation improvements.

---

Codex Task

[gemini-code-assist]

Code Review

This pull request updates the header layout and styling, including the addition of a 'read-only' status badge and improved responsiveness for smaller screens. I have reviewed the changes and recommend adding a fallback background color for the color-mix() CSS function to ensure compatibility with older browsers.

[gemini-code-assist]

The color-mix() function is a modern CSS feature. While it has good support in recent browser versions, providing a fallback background color is recommended to ensure the badge remains visually distinct in older browsers that do not support this syntax.

Suggested change

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

[Copilot]

Pull request overview

This PR updates the header UX to better represent shared-link (read-only) mode via an existing header status badge, while also refining header layout/responsiveness and standardizing some header control sizing.

Changes:

• Add #headerStatusBadge in the header and update shared-link logic to set its text instead of injecting a separate indicator node.
• Refine header/layout CSS across breakpoints (flex behavior, spacing, truncation, button sizing).
• Update public/index.html to reference newly built hashed bundle filenames and add aria-labels for header buttons.

Reviewed changes

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

Show a summary per file

File	Description
public/index.html	Adds #headerStatusBadge element in the header and updates hashed CSS/JS asset references; adds aria-labels to header buttons.
frontend/share.js	Updates checkSharedLink() to set the header badge text for shared links instead of inserting a new DOM node.
frontend/styles/header.css	Introduces .header-status-badge styling and adjusts header layout, sizing, and truncation behavior.
frontend/styles/responsive.css	Updates header/data-time responsive behavior, including 480px-specific wrapping and label hiding.
frontend/styles/utilities.css	Standardizes theme toggle button size and removes the legacy .readonly-badge style.
frontend/styles/compatibility.css	Adjusts read-only-mode visibility rules (no longer targets .time-info).

---

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

[Copilot]

body.read-only-mode makes .header-status-badge visible regardless of whether it has any content. Since checkSharedLink() adds read-only-mode before the fetch completes, the badge can render as an empty pill during the loading/error/redirect path. Consider only displaying the badge when it’s non-empty (e.g., via an :empty rule or :not(:empty) selector), or set a meaningful loading text before enabling the visible state.