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)

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,507 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
82/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css
Ambito
frontend

Direzione di ricerca

Inizia con la query del contenitore per gli spazi stretti in src/main/frontend/components/block.css e confrontala con l’override mobile in src/main/mobile/components/app.css; src/main/frontend/components/property.cljs mostra quali proprietà vengono visualizzate nell’area nascosta. Riproduci il problema in una viewport stretta da telefono e verifica che le proprietà, comprese quelle nascoste, appaiano e che il toggle funzioni. L’issue segnala un override CSS locale che ripristina il layout.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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!)
Lingua principale
Nessun dato sulla lingua
Stelle
29
Fork
2
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di logseq/db-test

Tutte le issue di logseq/db-test

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.