Website navbar logo is clipped when the navbar is crowded

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,255 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
scss
Lĩnh vực
frontend

Hướng nghiên cứu

Hiện tượng cắt xén đến từ quy tắc .navbar-brand trong src/resources/projects/website/navigation/quarto-nav.scss, quy tắc này đặt overflow hidden và cho phép liên kết logo co lại như một flex item bên trong .navbar-brand-container. Hãy bắt đầu từ khối .navbar-brand.navbar-brand-logo đã có trong tệp đó. Render dự án tái hiện và đo chiều rộng liên kết logo ở khoảng 1024px để xác nhận lỗi. Hoàn thành khi logo giữ nguyên chiều rộng đầy đủ trong dải màn hình hẹp, còn tiêu đề vẫn được cắt bớt bằng dấu ba chấm.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
478
Merge trung bình
17 giờ 7 phút
Pull request đã merge (30 ngày)
112

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.