mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-03-22 23:30:36 +08:00
c249011238
### Problem ●In edgeless mode, when the `note-edgeless-block` is scaled below 100%, its outer dimension becomes larger than its content region. This extra invisible region will block some user interactions such as clicks and hovers on editing elements underneath. <img width="1060" height="541" alt="note-elem-block-click" src="https://github.com/user-attachments/assets/860d7a4f-d159-437b-bbe8-4560e2463e3d" /> ●The following video demonstrates this issue: https://github.com/user-attachments/assets/3b719b25-0d7e-496b-9507-6aa65ed0a797 ### Solution ●The root cause is that `transform: scale(...)` CSS property (which implements the scale) is currently applyed to its **inner root element** instead of itself, and the solution is to move this CSS property to the proper place. ### After ●The video below shows the behavior after this fix. https://github.com/user-attachments/assets/e2dbd75d-c2ea-460d-90a1-5cc13e12d5b8 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Centralized CSS scaling for graphics and edgeless note blocks into dedicated public methods; rendering now uses these methods instead of inline transform calculations. * **Tests** * Updated end-to-end checks to read scale directly from the edgeless note element and use a more flexible transform-matching pattern. <!-- end of auto-generated comment: release notes by coderabbit.ai -->