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 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

logseq/db-test のほかの issue

logseq/db-test の issue をすべて見る

似ている issue

Web Dev の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。