q2's css for mermaid subgraph diagrams is broken

Đang mở Phù hợp với người mới
#1,095 0 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
75/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, rust
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu bằng cách tìm quy tắc CSS của giao diện q2 dành cho [id^=mermaid-] foreignObject và so sánh với cách khắc phục của Connect được mô tả trong issue. Tái hiện lỗi bằng Mermaid 12.2.0 trên một trang web dùng giao diện Bootstrap, với sơ đồ graph LR có chứa subgraph. Hoàn tất khi tiêu đề subgraph không còn ép sơ đồ thành một dải mỏng.

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

Mô tả

Mermaid subgraph titles inflate diagrams to a sliver

q2's theme CSS includes [id^=mermaid-] foreignObject{display:flex;align-items:center;justify-content:center;font-size:1rem}.
With the bundled mermaid 12.2.0, every subgraph title then measures 16384px wide, so a diagram with subgraphs scales down to a thin strip.
Repro: any graph LR with a subgraph in a website using a Bootstrap theme.
Connect works around it with [id^="mermaid-"] .cluster-label foreignObject { display: block; }.

Ngôn ngữ chính
Rust
Star
293
Fork
20
Merge trung bình
5 giờ 38 phút
Pull request đã merge (30 ngày)
199

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/q2

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

Issue tương tự

Thêm issue về Rust

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.