| @@ -357,8 +357,11 @@ | ||
| 357 | 357 | ------------------------------------------------------------------ */ |
| 358 | 358 | |
| 359 | 359 | .os-pinned-note__editor { |
| 360 | 360 | flex: 1 1 auto; |
| 361 | + /* Let the ink shrink inside the paper's max-height and scroll, | |
| 362 | + rather than spill past the paper's bottom edge. */ | |
| 363 | + min-height: 0; | |
| 361 | 364 | font-family: var(--dm-note-hand-font); |
| 362 | 365 | } |
| 363 | 366 | |
| 364 | 367 | .os-pinned-note__editor::part(textarea) { |
| @@ -369,13 +372,30 @@ | ||
| 369 | 372 | caret-color: var(--dm-note-ink, #4d4419); |
| 370 | 373 | font-family: var(--dm-note-hand-font); |
| 371 | 374 | font-size: 14px; |
| 372 | 375 | line-height: 1.45; |
| 376 | + scrollbar-width: thin; | |
| 377 | + scrollbar-color: color-mix(in srgb, var(--dm-note-ink, #4d4419) 28%, transparent) | |
| 378 | + transparent; | |
| 373 | 379 | } |
| 374 | 380 | |
| 381 | +/* Long notes: the last line fades into the paper instead of being | |
| 382 | + sliced mid-glyph, so it reads as "keep scrolling", not "cut off". | |
| 383 | + `data-more-below` drops once the reader reaches the end, so the | |
| 384 | + final line is never left faded. */ | |
| 385 | +.os-pinned-note__editor[data-more-below]::part(textarea), | |
| 386 | +.os-pinned-note__body[data-more-below] { | |
| 387 | + -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); | |
| 388 | + mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); | |
| 389 | +} | |
| 390 | + | |
| 375 | 391 | .os-pinned-note__body { |
| 376 | 392 | flex: 1 1 auto; |
| 393 | + min-height: 0; | |
| 377 | 394 | overflow-y: auto; |
| 395 | + scrollbar-width: thin; | |
| 396 | + scrollbar-color: color-mix(in srgb, var(--dm-note-ink, #4d4419) 28%, transparent) | |
| 397 | + transparent; | |
| 378 | 398 | font-family: var(--dm-note-hand-font); |
| 379 | 399 | font-size: 14px; |
| 380 | 400 | line-height: 1.45; |
| 381 | 401 | white-space: pre-wrap; |
