Web build on a phone: the fold arrow of an h1/h2 block lies on its bullet, so tapping the bullet folds instead of zooming in

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

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
87/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ệ
css
Lĩnh vực
frontend

Hướng nghiên cứu

Đọc các quy tắc nút thu gọn trong src/main/frontend/components/theme.css và các quy tắc wrapper h1/h2 trong src/main/frontend/components/block.css, sau đó so sánh với src/main/mobile/components/app.css. Tái hiện lỗi trên bản dựng web cho iPhone với một khối h1 hoặc h2 có phần tử con. Hoàn thành khi mũi tên nằm bên phải và chạm vào dấu đầu dòng sẽ phóng to.

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

Mô tả

Search first
  • I searched and no similar issues were found
What Happened?

In the web build on a phone (Safari or the home-screen web app), fold arrows sit on the right of each block, except in h1 and h2 heading blocks that have children. There the arrow sits on top of the bullet, and tapping the bullet folds the block instead of zooming in.

With fold arrows on the right (state/enable-fold-button-right?, true on mobile below the sm breakpoint), src/main/frontend/components/theme.css makes the arrow absolutely positioned (line 140) and keeps its wrapper static (line 123), so the arrow is placed against the block row:

main.ls-fold-button-on-right .block-control-wrap { position: static; }
main.ls-fold-button-on-right .ls-block .block-control { @apply absolute top-0 -right-1 z-[1]; }

For headings, src/main/frontend/components/block.css lowers the bullet by making that same wrapper relative (lines 1023-1027 for h1, 1039-1043 for h2):

.block-main-container[data-has-heading="2"] > .block-control-wrap { @apply relative top-2.5; }

That rule is more specific than the static one, so the wrapper becomes the arrow's containing block, and right: -4px puts the arrow on the bullet. The native mobile app already handles this in src/main/mobile/components/app.css (lines 203-225): heading wrappers stay static and are lowered with margin-top instead. That stylesheet is part of the mobile app only, so the web build on a phone doesn't get it. All these rules are unchanged on master 25b5ecf9cc (03-11-2026).

Reproduce the Bug
  1. Open the web build on a phone in portrait.
  2. Make a block a heading (h1 or h2) and give it a child.
  3. The fold arrow appears on the left, on top of the bullet. Tap the bullet: the block folds instead of zooming in.
Expected Behavior

The arrow sits on the right like on every other block, and tapping the bullet zooms in.

Moving the mobile app's rules to the shared CSS, scoped to main.ls-fold-button-on-right, should fix it. I override it locally like this, and it works on an iPhone:

main.ls-fold-button-on-right .block-main-container:is([data-has-heading='1'], :has(textarea.h1)) > .block-control-wrap { position: static; margin-top: 1rem; }
main.ls-fold-button-on-right .block-main-container:is([data-has-heading='2'], :has(textarea.h2)) > .block-control-wrap { position: static; margin-top: .625rem; }
Screenshots
Image Image
Desktop or Mobile Platform Information

iPhone, iOS 27.2 (Safari), as a PWA; web build from master 408198a4fe (24-10-2026).

Additional Context

Same pattern as logseq/db-test#1507 (being fixed in logseq/logseq#13934): a fix that exists in the mobile app's app.css but not in the web build.

Found and diagnosed with the help of an AI coding assistant reading the source. I confirmed it on an iPhone: the arrow lies on the bullet with the stock CSS, and moves to the right with the override.

If moving these rules is acceptable, I can open a PR for it.

Are you willing to submit a PR? If you know how to fix the bug.
  • I'm willing to submit a PR (Thank you!)
Ngôn ngữ chính
Không có dữ liệu ngôn ngữ
Star
29
Fork
2
Không có pull request nào được merge trong 30 ngày

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

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 logseq/db-test

Tất cả issue của logseq/db-test

Issue tương tự

Thêm issue về Web Dev

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.