kayg/calternal
Watch
1
0
Fork
You've already forked calternal
 0
Code Issues 191 Pull requests 61 Projects Releases Packages Wiki Activity Actions 20

Phone layout never scrolls sideways (#445) #578

Closed
kayg wants to merge 0 commits from issue/445-no-hscroll into dev
pull from: issue/445-no-hscroll
merge into: kayg:dev
Conversation 1 Commits - Files changed -
kayg commented 2026-10-18 10:42:23 +00:00
Owner
Copy link

Fixes the sideways page scroll on a narrow desktop window (#445).

Culprit: the block hover pill (.cm-block-pill, the arrow and dots at a block's right end). It is absolutely placed at the text column's right edge plus 12px. On a phone-width window the column fills the width, so the pill ended at x=437 in a 390px editor. That made .cm-scroller wider than its box (overflow-y: auto makes x auto too), and a sideways wheel or trackpad swipe scrolled it by 47px: the text shifted left and lost its first letters, as in the screenshot. The root document, the tree-line gutter and chips were not the cause (the page's scrollWidth was fine; the editor's scroller moved).

Fix

  • packages/editor/src/blocks/chrome.ts: the pill is clamped inside the scroller's visible width (it sits over the line end when there is no room).
  • apps/web/src/styles/cm.css: .cm-scroller { overflow-x: clip }, so nothing sticking out can scroll it sideways.
  • packages/ui/src/styles/base.css: overflow-x: clip on the root and body where the document scrolls (data-docscroll + glass edge). clip, not hidden, so sticky and fixed keep working.

Sideways swipes now move nothing, so the swipe-rows PR can take them. The gestures themselves are not built here.

Test: e2e/no-hscroll.spec.ts checks scrollWidth <= clientWidth, no element's scrollLeft moving, and scrollX staying 0 after sideways wheel events, at 390 and 600 wide, on a note, a list, and a note opened from the list, in chromium-1440, webkit-1440, chromium-390 and webkit-390 (24 tests). It failed before the fix (div.cm-scroller left=47).

Refs #445

🤖 Generated with Claude Code

https://claude.ai/code/session_01U5oTUycqAh7DT72mdSUztk

Fixes the sideways page scroll on a narrow desktop window (#445). **Culprit:** the block hover pill (`.cm-block-pill`, the arrow and dots at a block's right end). It is absolutely placed at the text column's right edge plus 12px. On a phone-width window the column fills the width, so the pill ended at x=437 in a 390px editor. That made `.cm-scroller` wider than its box (`overflow-y: auto` makes x auto too), and a sideways wheel or trackpad swipe scrolled it by 47px: the text shifted left and lost its first letters, as in the screenshot. The root document, the tree-line gutter and chips were not the cause (the page's `scrollWidth` was fine; the editor's scroller moved). **Fix** - `packages/editor/src/blocks/chrome.ts`: the pill is clamped inside the scroller's visible width (it sits over the line end when there is no room). - `apps/web/src/styles/cm.css`: `.cm-scroller { overflow-x: clip }`, so nothing sticking out can scroll it sideways. - `packages/ui/src/styles/base.css`: `overflow-x: clip` on the root and body where the document scrolls (`data-docscroll` + glass edge). `clip`, not `hidden`, so sticky and fixed keep working. Sideways swipes now move nothing, so the swipe-rows PR can take them. The gestures themselves are not built here. **Test:** `e2e/no-hscroll.spec.ts` checks `scrollWidth <= clientWidth`, no element's `scrollLeft` moving, and `scrollX` staying 0 after sideways wheel events, at 390 and 600 wide, on a note, a list, and a note opened from the list, in chromium-1440, webkit-1440, chromium-390 and webkit-390 (24 tests). It failed before the fix (`div.cm-scroller left=47`). Refs #445 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01U5oTUycqAh7DT72mdSUztk
Phone layout never scrolls sideways (#445)
Some checks failed
CI / web (pull_request) Failing after 9s
Details
CI / server (pull_request) Successful in 25s
Details
CI / rust (pull_request) Successful in 2m12s
Details
51de6a8915 
The block hover pill sat at the end of the text column, past the editor scroller's right edge on a
phone-width window, so the scroller was wider than its box and a sideways wheel moved it ~47px.
The pill now stays inside the scroller, the scroller and the document-scroll root clip sideways
overflow, and an e2e test checks scrollWidth and a sideways wheel.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
kayg commented 2026-10-18 12:07:45 +00:00
Author
Owner
Copy link

Landed in train AB, #580.

Train AB ran the full suite: fmt, clippy, workspace tests (502 passed, 0 failed), the build, svelte-check, and every Playwright project in parallel shards.

  • First run discarded: the Rust steps hadn't compiled (a broken shared environment file), so e2e had used an old binary. The train script now stops at the first failing Rust step.
  • Rerun: every shard passed except two tests that failed under load:
    • swipe-rows:116 passed 60 of 60 repeated alone;
    • missing-links:155 (page closed) passed 54 of 54.
  • webkit-390 shard 3/3: it collided on a port, was rerun alone, and passed 94 of 94.

Contents:

  • #576: the block-selection tint covers exactly its block;
  • #578: the phone layout never scrolls sideways;
  • #575: swipe rows;
  • #573: narrow handle and link pill padding;
  • #574: saves no longer copy the whole note, with the independent review's crash tests.
Landed in train AB, #580. Train AB ran the full suite: fmt, clippy, workspace tests (502 passed, 0 failed), the build, svelte-check, and every Playwright project in parallel shards. - **First run discarded:** the Rust steps hadn't compiled (a broken shared environment file), so e2e had used an old binary. The train script now stops at the first failing Rust step. - **Rerun:** every shard passed except two tests that failed under load: - `swipe-rows:116` passed 60 of 60 repeated alone; - `missing-links:155` (page closed) passed 54 of 54. - **webkit-390 shard 3/3:** it collided on a port, was rerun alone, and passed 94 of 94. Contents: - #576: the block-selection tint covers exactly its block; - #578: the phone layout never scrolls sideways; - #575: swipe rows; - #573: narrow handle and link pill padding; - #574: saves no longer copy the whole note, with the independent review's crash tests.
kayg closed this pull request 2026-10-18 12:07:45 +00:00
Some checks failed
CI / web (pull_request) Failing after 9s
Details
CI / server (pull_request) Successful in 25s
Details
CI / rust (pull_request) Successful in 2m12s
Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
backend
Rust server

  
design
Mockups, UI and TASTE

  
docs
ADRs, CONTEXT, TASTE

  
idea
Parked idea, never worked until promoted

  
infra
Deploy, CI, VMs

  
perf
Performance and budgets

  
reliability
Data integrity, corruption traps

  
web
Web client

No labels
backend
design
docs
idea
infra
perf
reliability
web
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal!578
No description provided.