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)

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,507 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css
Área
frontend

Línea de trabajo

Empieza con la consulta de contenedor para espacios estrechos en src/main/frontend/components/block.css y compárala con la sobrescritura móvil en src/main/mobile/components/app.css; src/main/frontend/components/property.cljs muestra qué propiedades se muestran en el área oculta. Reproduce el problema en una ventana gráfica estrecha de teléfono y comprueba que aparezcan las propiedades, incluidas las ocultas, y que funcione el interruptor. El issue informa de una sobrescritura CSS local que restaura el diseño.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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!)
Lenguaje dominante
Sin datos de lenguaje
Estrellas
29
Forks
2
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de logseq/db-test

Todos los issues de logseq/db-test

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.