Web build on a phone: block properties hidden in portrait (`.ls-properties-area` is `display: none` below 430px, the mobile app's override doesn't apply)

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#1,507 1 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
82/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

Bắt đầu với truy vấn vùng chứa cho khu vực hẹp trong src/main/frontend/components/block.css và so sánh với phần ghi đè trên thiết bị di động trong src/main/mobile/components/app.css; src/main/frontend/components/property.cljs cho biết những thuộc tính nào được hiển thị trong vùng ẩn. Tái hiện lỗi trên khung nhìn điện thoại hẹp và kiểm tra xem các thuộc tính, kể cả những thuộc tính bị ẩn, có xuất hiện và nút chuyển đổi có hoạt động hay không. Issue báo cáo một phần ghi đè CSS cục bộ khôi phục bố cục.

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 in portrait (Safari or the home-screen web app), a block shows only the properties positioned below it (Scheduled, for example), as pills. All its other properties are missing, such as the fields of a tag. "Show hidden properties" changes to "Collapse hidden properties", but nothing appears either. This also happens when zoomed in on the block. Rotating to landscape, where the block is wider than 430px, shows everything.

The cause is one rule in src/main/frontend/components/block.css. Every .ls-block is a size container named ls-block (container-type: inline-size; container-name: ls-block;, line 1077), and lines 1119-1123 hide the whole properties area in narrow blocks:

@container ls-block (max-width: 430px) {
    .ls-properties-area {
        display: none;
    }
}

Properties with :ui-position :block-below are rendered in the pill row outside this area, so they survive. Everything else that properties-area in src/main/frontend/components/property.cljs renders, including hidden-properties-cp, has no other place on screen. The native mobile app undoes this for its own pages in src/main/mobile/components/app.css (lines 407-411):

@container ls-block (max-width: 430px) {
    .ls-mobile-page .ls-properties-area {
        display: initial;
    }
}

That stylesheet and the .ls-mobile-page class are part of the mobile app only, so the web build on a phone gets the hiding rule without the override. Both rules are unchanged on master 25b5ecf9cc (03-11-2026); the block.css rule was last touched in fcc7316c9f ("fix: add ls-block container name", 24-05-2025).

Reproduce the Bug
  1. Take a block with a tag that has its own properties with values (for example a tag with two text properties), or a Task with an empty Deadline, and zoom in on it.
  2. View it in portrait on a phone, so the block is narrower than 430px: only the pill properties show.
  3. Tap "Show hidden properties": the label changes, nothing appears.
  4. Rotate to landscape: all properties show, and the toggle works.
Expected Behavior

The block's properties show at any width, and "Show hidden properties" reveals the hidden ones, such as the empty Deadline.

Dropping the block.css rule, or giving the web build the same exception as the mobile app, fixes it. I override it locally with .ls-block .ls-properties-area { display: block; } inside the same container query, and the regular panel layout works fine on a 390pt-wide iPhone screen. If hiding them on zoomed-out blocks is intentional (as described in logseq/logseq#1024), they should at least show on a zoomed-in block, as they do in the mobile app.

Screenshots

The same block in portrait (properties missing) and in landscape (shown).

Image Image
Files

No response

Browser, Desktop or Mobile Platform Information

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

Additional Context

Related: logseq/logseq#1024 (tag properties not visible on iOS, closed after zooming in fixed it in the mobile app). In the web build, zooming in doesn't help.

Found and diagnosed with the help of an AI coding assistant reading the source. I confirmed it on my iPhone: the property rows are in the DOM but hidden, rotating shows them, and the override above makes them appear in portrait.

If removing the rule 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.