Website navbar logo is clipped when the navbar is crowded

Aperta Adatta ai principianti
  • Qualcosa non va?
#15,255 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
scss
Ambito
frontend

Direzione di ricerca

Il ritaglio deriva dalla regola .navbar-brand in src/resources/projects/website/navigation/quarto-nav.scss, che imposta overflow hidden e consente al link del logo di restringersi come elemento flex all'interno di .navbar-brand-container. Inizia dal blocco esistente .navbar-brand.navbar-brand-logo in quel file. Esegui il rendering del progetto di riproduzione e misura la larghezza del link del logo a circa 1024px per confermare il bug. Il lavoro è completo quando il logo mantiene la sua larghezza piena nell'intervallo ristretto, mentre il titolo continua a essere troncato con i puntini di sospensione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement websites
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

On a website with a navbar logo, a title, and enough navbar items to fill the expanded navbar, the logo gets clipped from the right.
It happens at viewport widths just above the lg breakpoint, where the navbar is expanded but crowded.
The title truncates with an ellipsis as intended, but the logo link shrinks too, and overflow: hidden cuts off part of the image.

The cause is in src/resources/projects/website/navigation/quarto-nav.scss.
The logo and the title are both a.navbar-brand flex items inside .navbar-brand-container (display: flex), and every .navbar-brand gets overflow: hidden:

.navbar-brand {
  overflow: hidden;
  text-overflow: ellipsis;
}

overflow: hidden lets a flex item shrink below its content width, so both links shrink when space runs out.
That's what lets the title truncate, but it does the same to the logo link.
The rules are unchanged on main and at v1.12.0.

Steps to reproduce

  1. Create a website project with these three files:

    _quarto.yml:

    project:
  type: website

website:
  title: "Example Project Documentation"
  navbar:
    logo: logo.svg
    left:
      - text: "Home"
        href: index.qmd
      - text: "Getting Started"
        href: index.qmd
      - text: "User Guide"
        href: index.qmd
      - text: "How-to Guides"
        href: index.qmd
      - text: "Examples"
        href: index.qmd
      - text: "API Reference"
        href: index.qmd
      - text: "Release Notes"
        href: index.qmd
      - text: "Contributing"
        href: index.qmd

format: html

    index.qmd:

    ---
title: "Home"
---

Resize the browser window to about 1000px wide and look at the logo in the navbar.

    logo.svg (two circles, so clipping is easy to see):

    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="24" viewBox="0 0 48 24"><circle cx="12" cy="12" r="11" fill="#1f77b4"/><circle cx="36" cy="12" r="11" fill="#ff7f0e"/></svg>

  2. Run quarto render.

  3. Open _site/index.html in a browser at a viewport width of about 1024px.

Actual behavior

The logo is clipped: most of the orange circle is missing.

Image

Measured width of the logo link versus its 52px image:

Viewport Logo link width
1020px 34px
1100px 40px
1220px 45px
1340px 50px
1380px and wider 52px (not clipped)

With a longer title or more navbar items, the logo link can shrink to 0px and disappear entirely.

Expected behavior

The logo keeps its full size, and only the title shrinks and truncates with an ellipsis.

Image

Adding one rule fixes it, and works today as a workaround in a project stylesheet:

.navbar-brand.navbar-brand-logo {
  flex-shrink: 0;
}

In quarto-nav.scss, that would be flex-shrink: 0; in the existing .navbar-brand.navbar-brand-logo block.
With it, the logo link stays at the full 52px at every width from 980px to 1600px.

Your environment
  • IDE: none (rendered from the terminal)
  • OS: macOS 27.0.1
  • Browser: Google Chrome 156.0.8078.74

Also reproduced with Quarto 1.11.7.

Quarto check output
Quarto 1.9.37
[✓] Checking environment information...
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.4.5: OK
      Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.9.37
      Path: /Applications/quarto/bin
Lingua principale
JavaScript
Stelle
6.1k
Fork
478
Merge medio
17h 7m
PR unite (30g)
112

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/quarto-cli

Tutte le issue di quarto-dev/quarto-cli

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.