fix(reading): make the term-edit modal non-blocking while reading - #253
Merged
Conversation
Clicking a word already opened a compact, non-blocking popover, but "Add"/"Edit" switched to a stock Bulma modal: an 86%-opacity backdrop covering the full viewport plus a card filling ~95% of the screen height on mobile, hiding the text the reader was just looking at. Drop the modal-background dimming and, on mobile, pin the card to the bottom as a capped-height sheet (mirrors the existing word-popover bottom-drawer treatment). Split the edit form into tabs (Translation / Example / Notes / Tags), shown one at a time via the wordEditForm Alpine component, so the sheet fits a 50vh cap without scrolling and most of the reading text stays visible. Applied to both word_modal.php and multi_word_modal.php.
PHPCS (PSR-12) flagged one line in each modal view at 122 and 141 characters. Wrapped the attribute list and the <template> body; no markup or behaviour change.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Clicking a word already opened a compact, non-blocking popover, but "Add"/"Edit" switched to a stock Bulma modal: an 86%-opacity backdrop covering the full viewport, plus a card filling ~95% of the screen height on mobile — hiding the text the reader was just looking at.
Changes
wordEditFormAlpine component, so the sheet fits a 50vh cap without scrolling and most of the reading text stays visible.word_modal.phpandmulti_word_modal.php.Note on authorship and scope
The first commit is HugoFara's, authored 2026-07-04. It had been sitting unpushed on a local branch; this PR rebases it onto current
main(three merges newer than where it was written) and puts it up for review unchanged — the patch is byte-identical to the original.The second commit is mine and is style-only: PHPCS (PSR-12) flagged one line in each modal view, at 122 and 141 characters.
mainis clean of those warnings, so they came in with this change. Wrapped the attribute list and the<template>body; no markup or behaviour change.Verification
Re-verified on the current base rather than where the work was authored: Psalm 0 errors, PHPCS clean, TypeScript typecheck clean, PHPUnit 9085 passed, Vitest 4445 passed (the commit brings its own
word_edit_form.test.tscovering the tab component), assets rebuilt.The visual behaviour itself — the sheet layout and tab switching — has not been exercised in a browser here; the automated cover is the component unit tests. Worth a manual look on a narrow viewport before merging.