Web build on a phone: the fold arrow of an h1/h2 block lies on its bullet, so tapping the bullet folds instead of zooming in

Open Beginner friendly
  • Is something wrong?
#1,509 0 comments 0 reactions 0 assignees View on GitHub

@tiensonqin is already working on this.

Since Nov 7, 2026.

  • #13939 by @tiensonqin — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
87/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
frontend

Research direction

Read the fold button rules in src/main/frontend/components/theme.css and the h1/h2 wrapper rules in src/main/frontend/components/block.css, then compare them with src/main/mobile/components/app.css. Reproduce on an iPhone web build with an h1 or h2 block that has a child. Done when the arrow sits on the right and tapping the bullet zooms in.

Written by the indexing model from the issue text.

Description

Search first
  • I searched and no similar issues were found
What Happened?

In the web build on a phone (Safari or the home-screen web app), fold arrows sit on the right of each block, except in h1 and h2 heading blocks that have children. There the arrow sits on top of the bullet, and tapping the bullet folds the block instead of zooming in.

With fold arrows on the right (state/enable-fold-button-right?, true on mobile below the sm breakpoint), src/main/frontend/components/theme.css makes the arrow absolutely positioned (line 140) and keeps its wrapper static (line 123), so the arrow is placed against the block row:

main.ls-fold-button-on-right .block-control-wrap { position: static; }
main.ls-fold-button-on-right .ls-block .block-control { @apply absolute top-0 -right-1 z-[1]; }

For headings, src/main/frontend/components/block.css lowers the bullet by making that same wrapper relative (lines 1023-1027 for h1, 1039-1043 for h2):

.block-main-container[data-has-heading="2"] > .block-control-wrap { @apply relative top-2.5; }

That rule is more specific than the static one, so the wrapper becomes the arrow's containing block, and right: -4px puts the arrow on the bullet. The native mobile app already handles this in src/main/mobile/components/app.css (lines 203-225): heading wrappers stay static and are lowered with margin-top instead. That stylesheet is part of the mobile app only, so the web build on a phone doesn't get it. All these rules are unchanged on master 25b5ecf9cc (03-11-2026).

Reproduce the Bug
  1. Open the web build on a phone in portrait.
  2. Make a block a heading (h1 or h2) and give it a child.
  3. The fold arrow appears on the left, on top of the bullet. Tap the bullet: the block folds instead of zooming in.
Expected Behavior

The arrow sits on the right like on every other block, and tapping the bullet zooms in.

Moving the mobile app's rules to the shared CSS, scoped to main.ls-fold-button-on-right, should fix it. I override it locally like this, and it works on an iPhone:

main.ls-fold-button-on-right .block-main-container:is([data-has-heading='1'], :has(textarea.h1)) > .block-control-wrap { position: static; margin-top: 1rem; }
main.ls-fold-button-on-right .block-main-container:is([data-has-heading='2'], :has(textarea.h2)) > .block-control-wrap { position: static; margin-top: .625rem; }
Screenshots
Image Image
Desktop or Mobile Platform Information

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

Additional Context

Same pattern as logseq/db-test#1507 (being fixed in logseq/logseq#13934): a fix that exists in the mobile app's app.css but not in the web build.

Found and diagnosed with the help of an AI coding assistant reading the source. I confirmed it on an iPhone: the arrow lies on the bullet with the stock CSS, and moves to the right with the override.

If moving these rules 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!)
Dominant language
No language data
Stars
29
Forks
2
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from logseq/db-test

All issues in logseq/db-test

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.