rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust toolbar position to appear above iPad keyboard

Browse Source 
Update editable-cell.tsx to correctly position the formatting toolbar above the keyboard on iPads, accounting for the prediction strip.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: cf47b626-6976-4ea6-bdca-0c2f9315d3e2
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/IO8TMSC
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-05-20 10:00:20 +00:00
parent dd68923ba3
commit 224407a317
1 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/components/editable-cell.tsx
+29 -4
View File
@@ -598,10 +598,35 @@ function FormattingToolbar({
const vvTop = vv.offsetTop;
const vvBottom =
vv.offsetTop + (vv.height ?? window.innerHeight);
let top = rect.bottom + 4;
if (top + tbHeight > vvBottom - 4) {
const above = rect.top - tbHeight - 4;
top = Math.max(vvTop + 4, above);
// iPad / iOS adds a QuickType prediction strip ABOVE the keyboard
// (suggested words). `visualViewport.height` doesn't subtract it,
// so without padding the toolbar lands hidden under that strip.
// 48px covers both the prediction strip and the Arabic-keyboard
// shortcut row that some users have enabled.
const KEYBOARD_PREDICTION_INSET = vv.keyboardInset > 0 ? 48 : 4;
let top: number;
if (vv.keyboardInset > 0) {
// Keyboard is up — pin the toolbar to the BOTTOM of the visible
// viewport (right above the prediction strip), iMessage/Notes
// style. This keeps the color swatches + B/I/U + Save/Cancel
// reachable no matter where the active cell sits, and matches
// the user's mental model that "formatting follows the keyboard".
top = vvBottom - tbHeight - KEYBOARD_PREDICTION_INSET;
// Don't visually cover the cell being edited — if the keyboard-
// pinned slot would overlap the anchor, fall back to above the
// cell.
if (top < rect.bottom + 4 && rect.top - tbHeight - 4 >= vvTop + 4) {
top = rect.top - tbHeight - 4;
}
top = Math.max(vvTop + 4, top);
} else {
// No keyboard — prefer BELOW the cell (matches the schedule
// spec). Flip above only if below would clip the viewport.
top = rect.bottom + 4;
if (top + tbHeight > vvBottom - 4) {
const above = rect.top - tbHeight - 4;
top = Math.max(vvTop + 4, above);
}
}
// Clamp horizontally to the table's scroll container if we can
// find one; fall back to the viewport otherwise. This keeps the