quarto-dev / quarto-dev/quarto-cli

dark mode toggle moves adjacent to title on small screens

Open
#9,754 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug dark-mode html themes
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.

image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.