Website navbar logo is clipped when the navbar is crowded

オープン 初心者向け
  • 何か問題がありますか？
#15,255 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
scss
領域
frontend

調査の方向性

クリッピングは src/resources/projects/website/navigation/quarto-nav.scss の .navbar-brand ルールが原因です。このルールは overflow: hidden を設定しており、ロゴのリンクが .navbar-brand-container 内のフレックスアイテムとして縮小されることを許しています。このファイルにある既存の .navbar-brand.navbar-brand-logo ブロックから始めてください。再現プロジェクトをレンダリングし、約1024pxでロゴリンクの幅を測定して不具合を確認します。ロゴが狭い範囲でも全幅を保ち、タイトルは引き続き省略記号で切り詰められれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
JavaScript
スター
6.1k
フォーク
476
平均マージ
17時間 7分
マージ済み PR（30日）
112

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。