kayg/calternal

Watch

Fork 0

Drawing sheet: toolbar/Cancel/Done not clickable; title overlaps the properties panel #1101

New issue

Open

opened 2026-10-05 06:06:43 +00:00 by kayg · 7 comments

kayg commented

2026-10-05 06:06:43 +00:00

Owner

Owner report (2026-10-05, production 7c `df92d4da1`, desktop dark)

"I can't click on any of the top level buttons": in the Sketch sheet, the drawing toolbar and/or Cancel and Done do not respond to clicks (a focus dot shows on Cancel). Something overlays them (sheet header layer, an invisible element above the Excalidraw toolbar, pointer-events on the wrong layer) or Excalidraw captures the pointer. Every control must work by mouse, touch, Pencil and keyboard.
The sheet title overlaps the Excalidraw properties panel: "Sketch" sits on top of "Stroke".

Screenshot: sketch-sheet.webp in the job worktree.

## Owner report (2026-10-05, production 7c df92d4da1, desktop dark) 1. "I can't click on any of the top level buttons": in the Sketch sheet, the drawing toolbar and/or Cancel and Done do not respond to clicks (a focus dot shows on Cancel). Something overlays them (sheet header layer, an invisible element above the Excalidraw toolbar, pointer-events on the wrong layer) or Excalidraw captures the pointer. Every control must work by mouse, touch, Pencil and keyboard. 2. The sheet title overlaps the Excalidraw properties panel: "Sketch" sits on top of "Stroke". Screenshot: sketch-sheet.webp in the job worktree.

chromium-draw-surface.png

133 KiB

kayg commented

2026-10-05 06:07:47 +00:00

Author

Owner

Starting #1101–#1103 on branch job/draw-1101, based on dev at df92d4da129bfead879d417aef6e0514fc56ee96 (production Canvas base). I will reproduce and fix #1101 first and commit it separately as the hotfix, then implement the Draw rename and inline Drawing block. No pushes, deploys, or merges.

Starting #1101–#1103 on branch `job/draw-1101`, based on `dev` at `df92d4da129bfead879d417aef6e0514fc56ee96` (production Canvas base). I will reproduce and fix #1101 first and commit it separately as the hotfix, then implement the Draw rename and inline Drawing block. No pushes, deploys, or merges.

kayg referenced this issue

2026-10-05 06:07:48 +00:00

Rename Sketch to Draw; blocks are Drawing (inline) and Canvas (whole Note) #1102

kayg referenced this issue

2026-10-05 06:07:49 +00:00

Drawing blocks render inline in the editor with a full-screen button #1103

kayg commented

2026-10-05 06:23:18 +00:00

Author

Owner

Finding: owner-sketch-sheet.webp shows the floating ModeHeader title “Sketch” overlapping Excalidraw’s “Stroke” properties panel in the desktop dialog. The dialog reserves only 0.75rem before the drawing host while the header row is absolutely positioned over that area. I am checking the toolbar/header hit targets in the local production build in Chromium and WebKit before finalizing the hotfix.

Finding: `owner-sketch-sheet.webp` shows the floating ModeHeader title “Sketch” overlapping Excalidraw’s “Stroke” properties panel in the desktop dialog. The dialog reserves only 0.75rem before the drawing host while the header row is absolutely positioned over that area. I am checking the toolbar/header hit targets in the local production build in Chromium and WebKit before finalizing the hotfix.

kayg commented

2026-10-05 06:47:51 +00:00

Author

Owner

Hotfix commit bd76c1cba4096e36e4bbc271501b4b3fe8c19772 reserves the header band above Excalidraw on both presentations and disables native touch scrolling only inside the drawing gesture surface. It also adds a production Chromium/WebKit regression flow for toolbar tools, Done, Cancel and Escape. The cold local server build is still in progress; I will report the browser results after it completes.

Hotfix commit `bd76c1cba4096e36e4bbc271501b4b3fe8c19772` reserves the header band above Excalidraw on both presentations and disables native touch scrolling only inside the drawing gesture surface. It also adds a production Chromium/WebKit regression flow for toolbar tools, Done, Cancel and Escape. The cold local server build is still in progress; I will report the browser results after it completes.

kayg commented

2026-10-05 08:22:59 +00:00

Author

Owner

Owner (2026-10-05, production): hovering the top-right corner of the Select tool shows the tooltip for Rectangle (the next tool). Pointer hit areas are offset from the drawn buttons, which explains "can't click the top-level buttons". Likely cause: Excalidraw computes pointer coordinates from an offset/scale that is wrong inside our sheet (a CSS transform/scale on an ancestor such as the sheet's open animation, zoom, or a stale offset that is never refreshed after the sheet moves). Excalidraw needs an un-transformed container or a refresh (excalidrawAPI.refresh / updateScene) after layout settles. The title "Sketch" still overlaps the properties panel on production (not yet fixed there).

Owner (2026-10-05, production): hovering the top-right corner of the Select tool shows the tooltip for **Rectangle** (the next tool). Pointer hit areas are offset from the drawn buttons, which explains "can't click the top-level buttons". Likely cause: Excalidraw computes pointer coordinates from an offset/scale that is wrong inside our sheet (a CSS transform/scale on an ancestor such as the sheet's open animation, zoom, or a stale offset that is never refreshed after the sheet moves). Excalidraw needs an un-transformed container or a refresh (excalidrawAPI.refresh / updateScene) after layout settles. The title "Sketch" still overlaps the properties panel on production (not yet fixed there).

kayg commented

2026-10-05 08:24:38 +00:00

Author

Owner

The supplied screenshot showed the floating Stroke panel entering the ModeHeader title band. The hotfix reserves a 6rem band above the Canvas surface in the desktop dialog and phone sheet. A production geometry assertion verifies the Canvas surface starts below the header. touch-action: none keeps the Canvas gesture surface from being taken by the sheet.

Evidence from the production build:

E2E source and result are committed at 125e6e39493f8b1acf4242c16f04356c17e87c51. WebKit evidence will follow with the final report.

Production hotfix verification for #1101 is passing on the real production assets in Chromium and WebKit. The probe clicks every visible Excalidraw tool through its enclosing hit target, then clicks Cancel and Done with both mouse and touch. Both engines pass. The toolbar controls are transparent radios with a visible `.ToolIcon__icon` child, so the test targets the visible label instead of the hidden input. The supplied screenshot showed the floating Stroke panel entering the ModeHeader title band. The hotfix reserves a 6rem band above the Canvas surface in the desktop dialog and phone sheet. A production geometry assertion verifies the Canvas surface starts below the header. `touch-action: none` keeps the Canvas gesture surface from being taken by the sheet. Evidence from the production build: ![Chromium Draw sheet after the hotfix](https://git.kayg.org/attachments/f5513d43-526d-4a38-b73b-9dc72c593eb4) E2E source and result are committed at `125e6e39493f8b1acf4242c16f04356c17e87c51`. WebKit evidence will follow with the final report.

kayg commented

2026-10-05 09:03:09 +00:00

Author

Owner

Production evidence from canvas-pointer-1101.mjs:

Chromium: title clearance, mouse/touch tool selection, Done, Escape and removal passed.
WebKit: tapping the Ellipse tool in full screen timed out because .scrim[data-scrim-live] intercepted the pointer. The Drawing was still inside the Composer overlay layer.

I am moving the full-screen Drawing into the shared body overlay layer and will rerun this production probe in both engines.

Production evidence from `canvas-pointer-1101.mjs`: - Chromium: title clearance, mouse/touch tool selection, Done, Escape and removal passed. - WebKit: tapping the Ellipse tool in full screen timed out because `.scrim[data-scrim-live]` intercepted the pointer. The Drawing was still inside the Composer overlay layer. I am moving the full-screen Drawing into the shared body overlay layer and will rerun this production probe in both engines.

kayg commented

2026-10-05 10:41:55 +00:00

Author

Owner

#1101 status: READY FOR MERGE: yes for the separately committed hotfix (bd76c1cba4096e36e4bbc271501b4b3fe8c19772). Its production Chromium and WebKit run passed before the inline Drawing replacement:

PASS chromium: title clearance, mouse/touch tools, Done, Escape and removal
PASS webkit: title clearance, mouse/touch tools, Done, Escape and removal

The current integrated probe needs a selector correction before it can verify the replacement surface. It stops at selectEveryTool because .App-toolbar [role="radio"] finds no controls; an earlier run with labeled native radio inputs reached the later keyboard check. The #1103 feature and full branch are not ready for merge yet.

#1101 status: READY FOR MERGE: yes for the separately committed hotfix (`bd76c1cba4096e36e4bbc271501b4b3fe8c19772`). Its production Chromium and WebKit run passed before the inline Drawing replacement: `PASS chromium: title clearance, mouse/touch tools, Done, Escape and removal` `PASS webkit: title clearance, mouse/touch tools, Done, Escape and removal` The current integrated probe needs a selector correction before it can verify the replacement surface. It stops at `selectEveryTool` because `.App-toolbar [role="radio"]` finds no controls; an earlier run with labeled native radio inputs reached the later keyboard check. The #1103 feature and full branch are not ready for merge yet.

No labels

No milestone

No project

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#1101

No description provided.

Rows
Columns