Skip to content

Compact header height for better above-the-fold density #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alvin000009238 merged 3 commits into from
Mar 31, 2026
Merged

Compact header height for better above-the-fold density #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
63b8899
Compact header spacing and mobile layout
alvin000009238 Mar 31, 2026
6f885f8
Make header compact and resilient on narrow screens
alvin000009238 Mar 31, 2026
6d86ac7
Stabilize header layout strategy across breakpoints
alvin000009238 Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 41 additions & 12 deletions frontend/styles/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

z-index: 100;

padding: 14px 0;
padding: 10px 0;

margin: 0 -24px 40px;

Expand Down Expand Up @@ -36,9 +36,9 @@

align-items: center;

flex-wrap: wrap;
flex-wrap: nowrap;

@gemini-code-assist gemini-code-assist Bot Mar 31, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

將 .header-content 設置為 flex-wrap: nowrap 雖然能確保高度固定，但在內容較多（例如標題文字較長或導航項目增加）的情況下，可能會導致內容溢出容器。建議為標題區域設置 min-width: 0 並對 h1 使用 text-overflow: ellipsis，以確保在空間不足時能優雅處理。


gap: 16px;
gap: 12px;
Comment on lines 37 to +41

Copilot AI Mar 31, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing .header-content to flex-wrap: nowrap makes the header unable to wrap when content is wider than the viewport (logo + 2 action buttons + optional share indicator). Since body sets overflow-x: hidden (frontend/styles/base.css:33-46), this will clip header controls on narrow screens rather than allowing them to remain accessible. Consider allowing wrapping below a small breakpoint, or forcing the logo/text area to shrink/truncate (e.g., min-width: 0 + ellipsis) so the action buttons always fit.

Copilot uses AI. Check for mistakes.

max-width: 1200px;

Expand All @@ -56,6 +56,14 @@

gap: 12px;

min-width: 0;

flex: 1 1 auto;

}

.header-title-group {
min-width: 0;
}


Expand All @@ -68,9 +76,9 @@

justify-content: center;

width: 36px;
width: 32px;

height: 36px;
height: 32px;

background: var(--color-primary);

Expand All @@ -86,9 +94,9 @@

.logo-icon svg {

width: 20px;
width: 18px;

height: 20px;
height: 18px;

}

Expand All @@ -98,6 +106,8 @@

font-size: 20px;

line-height: 1.2;

font-weight: 600;

color: var(--color-text-main);
Expand All @@ -112,6 +122,14 @@

background-clip: unset;

margin: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}


Expand All @@ -122,10 +140,18 @@

font-size: 12px;

margin-top: 1px;
line-height: 1.2;

margin: 1px 0 0;

font-weight: 400;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}


Expand All @@ -138,7 +164,7 @@

align-items: center;

gap: 12px;
gap: 10px;

position: relative;

Expand All @@ -152,6 +178,8 @@

backdrop-filter: none;

min-width: 0;

}

.header-actions {
Expand Down Expand Up @@ -197,6 +225,8 @@

font-size: 12px;

line-height: 1.2;

font-weight: 500;

color: var(--color-text-secondary);
Expand Down Expand Up @@ -241,9 +271,9 @@

gap: 8px;

height: 40px;
min-height: 36px;

padding: 0 18px;
padding: 0 14px;

background: var(--color-primary);

Expand Down Expand Up @@ -484,4 +514,3 @@ visibility: visible;
color: var(--color-text-muted);

}

55 changes: 42 additions & 13 deletions frontend/styles/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,11 @@



.header-content {

flex-direction: column;

align-items: flex-start;

}



.data-time-box {

align-self: stretch;
justify-content: flex-end;

justify-content: space-between;
gap: 8px;

}

Expand Down Expand Up @@ -161,6 +151,46 @@

@media (max-width: 480px) {

.header {
margin-bottom: 20px;
}

.header-content {
flex-wrap: wrap;
gap: 8px;
}

.data-time-box {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}

.time-label {
display: none;
}

.time-info {
padding-right: 8px;
}
Comment on lines +173 to +175

Copilot AI Mar 31, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR description mentions hiding secondary time-info on small screens, but the 480px rules still keep .time-info visible (only padding is adjusted). If the intent is to remove it to save space, hide the .time-info container (and remove its right border) rather than only tweaking padding.

Copilot uses AI. Check for mistakes.

.time-value {
font-size: 11px;
}

.header-actions .import-dropdown-btn {
min-width: 36px;
padding: 0 10px;
}

.header-actions .import-dropdown-btn > span:last-child {
display: none;

Copilot AI Mar 31, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On <=480px the visible text label inside .import-dropdown-btn is removed with display: none, but the affected buttons (e.g. 分享 / 匯入成績) do not have aria-labels in the markup. This leaves icon-only controls without an accessible name for screen readers; add aria-label/title to the buttons or hide the label visually (not with 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;

Copilot uses AI. Check for mistakes.
}

.header-actions {
flex-wrap: wrap;
}

.student-details {

flex-direction: column;
Expand Down Expand Up @@ -194,4 +224,3 @@
}

}

4 changes: 2 additions & 2 deletions frontend/styles/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@
}

.theme-toggle-btn {
width: 40px;
height: 40px;
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
background: var(--color-surface-elevated);
Expand Down
11 changes: 6 additions & 5 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
</noscript>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
<script src="/theme-init.js"></script>
<link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
<link rel="stylesheet" href="/dist/main-D1WLtR6h.css" id="vite-css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>

Expand Down Expand Up @@ -68,7 +68,7 @@ <h2>中大壢中成績分析平台</h2>
<path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
</svg>
</div>
<div class="logo-text">
<div class="logo-text header-title-group">
<h1>成績分析平台</h1>
<p class="subtitle" id="examTitle">--</p>
</div>
Expand Down Expand Up @@ -97,7 +97,8 @@ <h1>成績分析平台</h1>
</svg>
</span>
</button>
<button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
<button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
aria-label="分享">
<span class="dropdown-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
Expand All @@ -108,7 +109,7 @@ <h1>成績分析平台</h1>
</span>
<span>分享</span>
</button>
<button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
<button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
<span class="dropdown-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
Expand Down Expand Up @@ -523,7 +524,7 @@ <h3 class="section-title">
</footer>
</div>

<script type="module" src="/dist/main-1Jkr9rBG.js"></script>
<script type="module" src="/dist/main-TqLOYhxL.js"></script>
</body>

</html>
Loading