[PR #1599] [MERGED] fix(instructors): keep theme toggle visible across breakpoints #9211

New Issue

GiteaMirror · 2026-05-03T01:28:41-05:00

GiteaMirror commented

2026-05-03 01:28:41 -05:00

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1599
Author: @farhan523
Created: 4/29/2026
Status: ✅ Merged
Merged: 4/29/2026
Merged by: @profvjreddi

Base: dev ← Head: fix/instructors-theme-toggle-visibility

📝 Commits (2)

e77f269 fix(instructors): keep theme toggle visible across breakpoints
0f1d587 Merge remote-tracking branch 'origin/dev' into pr1599-merge

📊 Changes

1 file changed (+2 additions, -2 deletions)

View changed files

📝 shared/styles/partials/_mobile.scss (+2 -2)

📄 Description

Summary

Exclude the Quarto color-scheme (theme) toggle from the mobile sidebar-hide rule so the dark/light switch stays accessible on small screens.
Widen the icon-only collapse range for right-side navbar actions to 1200px–1590px and target the last 4 ms-auto items, preventing label overflow at mid-widths.

Changes

shared/styles/partials/_mobile.scss: add :not(.quarto-color-scheme-toggle) to the .quarto-navigation-tool hide selectors.
shared/styles/partials/_navbar.scss: extend media query upper bound to 1399px → 1590px and switch selector to ul.navbar-nav.ms-auto > li:nth-last-child(-n+4) .nav-link .menu-text.

Before Desktop

After Desktop

Before Mobile

After Mobile

Test plan

Verify theme toggle is visible on mobile widths (<768px) on the instructors page.
Verify right-side navbar actions collapse to icons cleanly between 1200px and 1590px.
Confirm no regression at ≥1600px (full labels) and ≥hamburger breakpoint (mobile menu).
Toggle dark/light mode from mobile to confirm the switch still works.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1599 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 4/29/2026 **Status:** ✅ Merged **Merged:** 4/29/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/instructors-theme-toggle-visibility` --- ### 📝 Commits (2) - [`e77f269`](https://github.com/harvard-edge/cs249r_book/commit/e77f26926dd484b136b6a276b2dee6ee2f37b019) fix(instructors): keep theme toggle visible across breakpoints - [`0f1d587`](https://github.com/harvard-edge/cs249r_book/commit/0f1d58715305a466c4b2a91663f4394fa0c1601e) Merge remote-tracking branch 'origin/dev' into pr1599-merge ### 📊 Changes **1 file changed** (+2 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `shared/styles/partials/_mobile.scss` (+2 -2) </details> ### 📄 Description ## Summary - Exclude the Quarto color-scheme (theme) toggle from the mobile sidebar-hide rule so the dark/light switch stays accessible on small screens. - Widen the icon-only collapse range for right-side navbar actions to `1200px–1590px` and target the last 4 `ms-auto` items, preventing label overflow at mid-widths. ## Changes - [shared/styles/partials/_mobile.scss](shared/styles/partials/_mobile.scss): add `:not(.quarto-color-scheme-toggle)` to the `.quarto-navigation-tool` hide selectors. - [shared/styles/partials/_navbar.scss](shared/styles/partials/_navbar.scss): extend media query upper bound to `1399px → 1590px` and switch selector to `ul.navbar-nav.ms-auto > li:nth-last-child(-n+4) .nav-link .menu-text`. ## Before Desktop <img width="1915" height="92" alt="before instructor navbar" src="https://github.com/user-attachments/assets/cc00c946-4c44-4cad-8b61-42804338bb68" /> ## After Desktop <img width="1906" height="86" alt="after instructor navbar" src="https://github.com/user-attachments/assets/db04781e-9eb1-467a-928e-8e8f3ef9b543" /> ## Before Mobile <img width="488" height="54" alt="before instructor mobile navbar" src="https://github.com/user-attachments/assets/af2d6504-90a5-4345-a09e-225d2a7cc1e0" /> ## After Mobile <img width="617" height="592" alt="after mobile instructor navbar" src="https://github.com/user-attachments/assets/455dddae-eab1-4213-8707-324b4186a284" /> ## Test plan - [ ] Verify theme toggle is visible on mobile widths (<768px) on the instructors page. - [ ] Verify right-side navbar actions collapse to icons cleanly between 1200px and 1590px. - [ ] Confirm no regression at ≥1600px (full labels) and ≥hamburger breakpoint (mobile menu). - [ ] Toggle dark/light mode from mobile to confirm the switch still works. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-03 01:28:42 -05:00

GiteaMirror closed this issue

2026-05-03 01:28:44 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#9211