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)

未关闭 适合新手
  • 哪里不对？
#1,507 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
82/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
css
领域
frontend

调研方向

从 src/main/frontend/components/block.css 中针对狭窄区域的容器查询开始，并将其与 src/main/mobile/components/app.css 中的移动端覆盖规则进行比较；src/main/frontend/components/property.cljs 展示了隐藏区域中会渲染哪些属性。在窄屏手机视口中复现问题，并检查属性（包括隐藏的属性）是否显示，以及切换控件是否正常工作。Issue 报告称，本地 CSS 覆盖规则可以恢复布局。

由索引模型根据 Issue 内容生成。

描述

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!)
主要语言
没有语言数据
星标
29
派生
2
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

logseq/db-test 的其他 Issue

查看 logseq/db-test 的全部 Issue

相似的 Issue

更多 Web Dev Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。