Refactor header styles and improve responsiveness for better UX by alvin000009238 · Pull Request #108 · alvin000009238/clhs_score

alvin000009238 · 2026-03-31T15:20:57Z

No description provided.

…t-for-better-ux Compact header height for better above-the-fold density

…t-for-better-ux Header/share UI refactor: add header status badge, tweak header styles and responsiveness

…t-for-better-ux-d99l1w UI: show read-only header badge for shared links and refine header layout/responsive styles

Reduced header height and adjusted badge styles for better UX.

…t-for-better-ux-cmpi18 Show read-only status via header badge and refactor header styles/responsiveness

…t-for-better-ux-jmpkiv Show read-only badge for shared links and refine header/responsive styles

…t-for-better-ux-sokajx Show read-only header badge for shared links and refine header/layout styles

…t-for-better-ux-l3icpc Show header status badge for shared (read-only) views and refine header responsiveness/styles

gemini-code-assist

Code Review

This pull request refactors the header layout and styling, introducing a new status badge system for read-only mode and improving responsive behavior. Feedback highlights a critical issue with duplicate HTML IDs for the status badge in the HTML template, which prevents correct DOM updates, and suggests using a class-based selector to update all badge instances simultaneously.

gemini-code-assist · 2026-03-31T15:23:14Z

                    </div>
                </div>
                <div class="data-time-box">
+                    <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>


The ID headerStatusBadge is duplicated here; it was already defined on line 75. HTML IDs must be unique within a document. This duplication will cause document.getElementById('headerStatusBadge') in share.js to only return the first occurrence (the one in the logo area), leaving this second badge unpopulated. Consider using a class for these badges or ensuring each ID is unique.

gemini-code-assist · 2026-03-31T15:23:14Z

+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';


Since there are multiple elements with the class header-status-badge in the HTML (and currently duplicate IDs), using getElementById will only update the first instance found. To ensure all status badges are updated correctly across different responsive layouts, it is better to use querySelectorAll with the class name.

Suggested change

const headerStatusBadge = document.getElementById('headerStatusBadge');

if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';

document.querySelectorAll('.header-status-badge').forEach(el => {

el.textContent = '僅供檢視';

});

Copilot

Pull request overview

This PR refactors the header layout/styles and adjusts responsive behavior to improve usability on smaller screens, including a new read-only status indicator shown when viewing shared links.

Changes:

Update header markup to group title/subtitle and introduce a “status badge” element for read-only mode.
Refine header/responsive CSS (spacing, wrapping behavior, smaller controls on mobile).
Update share-link flow to set the new header status badge text in read-only mode.

Reviewed changes

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

Show a summary per file

File	Description
public/index.html	Updates header DOM structure; adds status badge element; tweaks button accessibility labels and build asset hashes.
frontend/styles/header.css	Refactors header layout styles and introduces `.header-status-badge` styling/visibility rules.
frontend/styles/responsive.css	Adjusts mobile header wrapping and button text visibility at small widths.
frontend/styles/utilities.css	Shrinks theme toggle button dimensions; removes now-unused `.readonly-badge` styling.
frontend/styles/compatibility.css	Updates read-only-mode header/time box layout rules.
frontend/share.js	Switches read-only indicator logic to populate the new header status badge.

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

Copilot · 2026-03-31T15:24:09Z

                    </div>
                </div>
                <div class="data-time-box">
+                    <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>


id="headerStatusBadge" is used twice in the same document (once in .subtitle-row and again in .data-time-box). Duplicate IDs are invalid HTML and will cause getElementById('headerStatusBadge') to only target one of them, leaving the other badge out of sync. Make the ID unique (or remove the ID and target by class, updating all matching badges).

Suggested change

Copilot · 2026-03-31T15:24:10Z

+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';


The page now contains multiple .header-status-badge elements, but this code uses getElementById('headerStatusBadge'), which will only ever update a single element (and is especially problematic given the current duplicate IDs in the HTML). Either ensure there is exactly one badge element in the DOM, or update all badges via a class selector (e.g., querySelectorAll('.header-status-badge')).

Suggested change

const headerStatusBadge = document.getElementById('headerStatusBadge');

if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';

const headerStatusBadges = document.querySelectorAll('.header-status-badge');

headerStatusBadges.forEach(badge => {

badge.textContent = '僅供檢視';

});

…t-for-better-ux-vbfbwp Header & responsive layout polish; add read-only status badge for shared links

Copilot

Pull request overview

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

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

Copilot · 2026-04-01T02:51:14Z

-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" aria-live="polite"></span>


public/index.html now renders two .header-status-badge live regions (one next to the subtitle and another inside .data-time-box). In read-only mode both will become visible and both can announce updates via aria-live, which is confusing (duplicate badge text / double announcements). Consider keeping a single status badge element (or hide one via responsive CSS and ensure only one has aria-live).

Suggested change

Copilot · 2026-04-01T02:51:15Z

+                document.querySelectorAll('.header-status-badge')
+                    .forEach((headerStatusBadge) => {
+                        headerStatusBadge.textContent = '僅供檢視';
+                    });


This updates all .header-status-badge nodes. Given the header now includes multiple badges, this will duplicate the read-only status text and may trigger multiple aria-live announcements. Prefer targeting a single, well-defined element (e.g., #headerStatusBadge) or ensure only one badge exists. Also, since the old DOM-inserted .share-indicator was removed, the remaining .share-indicator CSS in frontend/styles/compatibility.css appears unused and can be removed to avoid dead styles.

Suggested change

document.querySelectorAll('.header-status-badge')

.forEach((headerStatusBadge) => {

headerStatusBadge.textContent = '僅供檢視';

});

const headerStatusBadge = document.getElementById('headerStatusBadge');

if (headerStatusBadge) {

headerStatusBadge.textContent = '僅供檢視';

}

Copilot · 2026-04-01T02:51:15Z

+.time-label {
+    display: none;

 }


.time-label is now display: none unconditionally, which removes the visible (and screen-reader) context for what #updateTime represents. If the label should be visually hidden for layout reasons, consider keeping it accessible (e.g., via a visually-hidden utility) or adding an aria-label/aria-labelledby relationship so the update time still has a meaningful accessible name.

…t-for-better-ux-w2l7ar Improve header layout and read-only share UI with status badge, responsive tweaks, and accessibility updates

Copilot

Pull request overview

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

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

Copilot · 2026-04-01T03:08:27Z

+    }
+
+    .time-label {
+        display: none;


On small screens, .time-label { display: none; } hides the element that #updateTime references via aria-labelledby="updateTimeLabel". When the referenced label is display:none, many screen readers/browsers won't expose it, which can break the accessible name for the update time. Prefer keeping the label visually-hidden (like the .time-label definition in header.css) rather than display:none.

Suggested change

display: none;

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border: 0;

alvin000009238 added 24 commits March 31, 2026 21:32

Compact header spacing and mobile layout

63b8899

Make header compact and resilient on narrow screens

6f885f8

Stabilize header layout strategy across breakpoints

6d86ac7

Merge pull request #101 from alvin000009238/codex/reduce-header-heigh…

2c8d37f

…t-for-better-ux Compact header height for better above-the-fold density

Unify mobile header skeleton and downgrade readonly indicator

89fb74e

Merge branch 'dev' into codex/reduce-header-height-for-better-ux

d9ce7c0

Merge pull request #102 from alvin000009238/codex/reduce-header-heigh…

47a5035

…t-for-better-ux Header/share UI refactor: add header status badge, tweak header styles and responsiveness

Refine readonly badge placement and header alignment

b9f72a5

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-d99l1w

0951fb0

Merge pull request #103 from alvin000009238/codex/reduce-header-heigh…

10f6eca

…t-for-better-ux-d99l1w UI: show read-only header badge for shared links and refine header layout/responsive styles

Refactor header styles for improved user experience

8252d9e

Reduced header height and adjusted badge styles for better UX.

Keep read-only timestamp anchored at left in header

126db00

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-cmpi18

69f46b6

Merge pull request #104 from alvin000009238/codex/reduce-header-heigh…

db7b120

…t-for-better-ux-cmpi18 Show read-only status via header badge and refactor header styles/responsiveness

Align read-only time baseline with header action buttons

b116b37

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-jmpkiv

0d9de3f

Merge pull request #105 from alvin000009238/codex/reduce-header-heigh…

8091cc6

…t-for-better-ux-jmpkiv Show read-only badge for shared links and refine header/responsive styles

Apply centered time row alignment in normal and read-only headers

9f1cd5b

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-sokajx

9da01d0

Merge pull request #106 from alvin000009238/codex/reduce-header-heigh…

e56f639

…t-for-better-ux-sokajx Show read-only header badge for shared links and refine header/layout styles

Rename rightmost header action to 載入成績

87f6685

Keep rightmost sync button text visible on small screens

c2a5337

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-l3icpc

a302c0d

Merge pull request #107 from alvin000009238/codex/reduce-header-heigh…

518ed78

…t-for-better-ux-l3icpc Show header status badge for shared (read-only) views and refine header responsiveness/styles

Copilot AI review requested due to automatic review settings March 31, 2026 15:20

Copilot started reviewing on behalf of alvin000009238 March 31, 2026 15:21 View session

gemini-code-assist Bot reviewed Mar 31, 2026

View reviewed changes

Copilot AI reviewed Mar 31, 2026

View reviewed changes

alvin000009238 added 2 commits March 31, 2026 23:34

Use class-based status badge updates to avoid duplicate-id issues

9f1e1d1

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-vbfbwp

6e18f6a

Merge pull request #109 from alvin000009238/codex/reduce-header-heigh…

90c8d33

…t-for-better-ux-vbfbwp Header & responsive layout polish; add read-only status badge for shared links

alvin000009238 requested a review from Copilot April 1, 2026 02:46

Copilot started reviewing on behalf of alvin000009238 April 1, 2026 02:47 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

alvin000009238 added 3 commits April 1, 2026 11:00

Consolidate single status badge owner and restore time semantics

a9289c0

Merge branch 'dev' into codex/reduce-header-height-for-better-ux-w2l7ar

d027163

Merge pull request #110 from alvin000009238/codex/reduce-header-heigh…

fe7ebdf

…t-for-better-ux-w2l7ar Improve header layout and read-only share UI with status badge, responsive tweaks, and accessibility updates

alvin000009238 requested a review from Copilot April 1, 2026 03:05

Copilot started reviewing on behalf of alvin000009238 April 1, 2026 03:05 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

alvin000009238 merged commit 18b38f7 into main Apr 1, 2026
6 checks passed

Navigation Menu

Refactor header styles and improve responsiveness for better UX - #108

Refactor header styles and improve responsiveness for better UX#108
alvin000009238 merged 30 commits into
mainfrom
dev

alvin000009238 commented Mar 31, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Mar 31, 2026

Uh oh!

gemini-code-assist Bot Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const headerStatusBadge = document.getElementById('headerStatusBadge');
		if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';

	<span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
	<span class="header-status-badge" aria-live="polite"></span>

-                const headerStatusBadge = document.getElementById('headerStatusBadge');
-                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
+                const headerStatusBadges = document.querySelectorAll('.header-status-badge');
+                headerStatusBadges.forEach(badge => {
+                    badge.textContent = '僅供檢視';
+                });

	<span class="header-status-badge" aria-live="polite"></span>
	<span class="header-status-badge" aria-hidden="true"></span>

-        display: none;
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;

Conversation

alvin000009238 commented Mar 31, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants