quarto-dev / quarto-dev/quarto-cli
dark mode toggle moves adjacent to title on small screens
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
The dark mode toggle does not stay on the right side of the navbar on small screens.
Steps to reproduce
Given the Quarto project configuration:
project:
title: project title
type: website
website:
navbar:
pinned: true
left:
- text: "Home"
href: index.qmd
search: true
format:
html:
theme:
light: flatly
dark: darkly
Any simple index.qmd file can be paired with this project definition.
Expected behavior
The toggle button remains on the right of the screen.
Actual behavior
The toggle button moves left, adjacent to the title.
Your environment
No response
Quarto check output
Quarto 1.4.551
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.11: OK
Dart Sass version 1.69.5: OK
Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.4.551
Path: /Users/aron/quarto/quarto-1.4.551-macos/bin
[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /Library/TeX/texbin
Version: 2024
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.12.2
Path: /opt/homebrew/opt/python@3.12/bin/python3.12
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with python3 -m pip install jupyter
[✓] Checking R installation...........OK
Version: 4.3.3
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
knitr: 1.45
rmarkdown: 2.27
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by rendering the minimal website configuration from the issue at a small viewport and inspect the generated navbar and its responsive styles. Done means the dark mode toggle remains aligned on the right side of the screen while the title and navigation still render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100