v1.3.7-beta — tablet and mobile support#35
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Adds tablet/phone readiness across the compositor UI, including touch-friendly sortable interactions, responsive editor/layout adjustments, and a new capture “viewfinder” overlay for framing content across visitor aspect ratios.
Changes:
- Introduces shared dnd-kit sensor configuration for touch vs mouse dragging, and wires it into all major sortable lists.
- Updates many layouts/styles for small screens (responsive header/tab nav, narrower sidebars, scroll/overflow fixes, larger touch targets).
- Adds capture framing guides to the IIIF viewer (new viewport math helpers + i18n strings) and improves dialog behavior for small/touch viewports.
Reviewed changes
Copilot reviewed 45 out of 45 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/homepage-welcome-autosave-target.test.tsx | Updates dnd-kit mocks for new sensors + bumps test header version. |
| tests/homepage-live-lang.test.tsx | Updates dnd-kit mocks for new sensors + bumps test header version. |
| tests/_app.homepage.test.tsx | Updates dnd-kit mocks for new sensors + bumps test header version. |
| README.md | Bumps displayed beta version to v1.3.7-beta (EN/ES). |
| CHANGELOG.md | Adds v1.3.7-beta release notes (mobile/tablet support + viewfinder). |
| app/styles/app.css | Adds landscape-compact custom variant + coarse-pointer input sizing and .tap-target. |
| app/routes/_app.tsx | Hides TabNav on story editor route in landscape-compact to reclaim vertical space. |
| app/routes/_app.stories.tsx | Switches sortable sensor setup to useSortableSensors; widens container max width. |
| app/routes/_app.pages.tsx | Switches sortable sensor setup to useSortableSensors; improves overflow/width behavior. |
| app/routes/_app.objects.tsx | Widens container max width for responsive layouts. |
| app/routes/_app.objects.$objectId.tsx | Makes viewer/editor stack below lg and sets viewer min-height when stacked. |
| app/routes/_app.glossary.tsx | Narrows sidebar on phones; hides preview pane below lg; overflow fixes. |
| app/lib/viewer-utils.ts | Adds aspect constants + visitor-visible/safe-zone rect helpers for viewfinder. |
| app/i18n/locales/es/objects.json | Adds viewfinder toggle/hint strings (ES). |
| app/i18n/locales/es/editor.json | Adds editor shell drawer/rotate-hint strings (ES). |
| app/i18n/locales/en/objects.json | Adds viewfinder toggle/hint strings (EN). |
| app/i18n/locales/en/editor.json | Adds editor shell drawer/rotate-hint strings (EN). |
| app/hooks/use-sortable-sensors.ts | New shared dnd-kit sensor hook (mouse vs touch delay + keyboard). |
| app/hooks/use-media-query.ts | New SSR-safe matchMedia hook. |
| app/components/ui/MarkdownEditor.tsx | Improves toolbar wrapping + touch-target sizing on coarse pointers. |
| app/components/ui/Dialog.tsx | Adds scroll wrapper + focus scrolling to avoid keyboard occlusion; updates overlay layout. |
| app/components/layout/TabNav.tsx | Adds horizontal overflow fades/chevrons + responsive padding + landscape-compact top offset. |
| app/components/layout/Header.tsx | Makes header responsive (compact landscape height, padding, hides brand text below lg). |
| app/components/layout/Footer.tsx | Bumps displayed version to 1.3.7-beta. |
| app/components/features/upgrade/WorkflowsPermissionModal.tsx | Uses dvh for max-height in small/touch viewports. |
| app/components/features/stories/SortableStoryRow.tsx | Increases drag handle touch target on coarse pointers. |
| app/components/features/site-status/SiteStatusPill.tsx | Hides action label below sm to prevent header crowding. |
| app/components/features/release/WhatsNewModal.tsx | Uses dvh for max-height in small/touch viewports. |
| app/components/features/pages/SortablePageTab.tsx | Makes delete affordance visible on touch (no hover). |
| app/components/features/pages/PagesSidebar.tsx | Narrows sidebar on phones + touch-friendly delete affordance visibility. |
| app/components/features/pages/HomepageEditor.tsx | Switches sortable sensor setup to useSortableSensors. |
| app/components/features/objects/SyncDiffDialog.tsx | Makes diff dialog responsive and uses dvh for height. |
| app/components/features/objects/ObjectRow.tsx | Reflows metadata on phones (year/status folded under title) + touch-friendly delete visibility. |
| app/components/features/objects/IiifViewer.tsx | Adds optional capture guides overlay + touch gesture tuning + touch-sized zoom buttons. |
| app/components/features/header/ProjectSwitcher.tsx | Improves small-screen sizing/overflow for repo switcher dropdown. |
| app/components/features/editor/ViewerColumn.tsx | Enables capture guides for IIIF media in the editor viewer column. |
| app/components/features/editor/TitleCardView.tsx | Makes “click to edit” affordance visible on touch. |
| app/components/features/editor/StepView.tsx | Makes “click to edit” affordance visible on touch. |
| app/components/features/editor/StepSidebar.tsx | Switches sortable sensor setup to useSortableSensors. |
| app/components/features/editor/SortableStepItem.tsx | Enlarges drag grip + makes delete affordance visible on touch. |
| app/components/features/editor/SectionCardView.tsx | Makes “click to edit” affordance visible on touch. |
| app/components/features/editor/ObjectPickerDialog.tsx | Makes object picker grid responsive (2→4 columns). |
| app/components/features/editor/LayerPanel.tsx | Makes label-edit affordance visible on touch. |
| app/components/features/editor/EditorShell.tsx | Implements responsive editor shell with steps drawer + rotate hint + landscape-compact sizing. |
| app/components/features/config/NavigationEditor.tsx | Switches sortable sensor setup to useSortableSensors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+59
to
+78
| // Keyboard-occlusion guard for touch devices: when a field inside the dialog | ||
| // is focused the on-screen keyboard covers the lower half, hiding inputs and | ||
| // the confirm/submit buttons. Scroll the focused field into the centre of the | ||
| // (now shorter) visible area so it — and the controls below it — stay reachable. | ||
| useEffect(() => { | ||
| if (!open) return; | ||
| function handleFocusIn(e: FocusEvent) { | ||
| const el = e.target as HTMLElement | null; | ||
| if (!el) return; | ||
| const tag = el.tagName; | ||
| if (tag === "INPUT" || tag === "TEXTAREA" || el.isContentEditable) { | ||
| // Defer so it runs after the keyboard animates in and layout settles. | ||
| setTimeout(() => { | ||
| el.scrollIntoView({ block: "center", behavior: "smooth" }); | ||
| }, 150); | ||
| } | ||
| } | ||
| document.addEventListener("focusin", handleFocusIn); | ||
| return () => document.removeEventListener("focusin", handleFocusIn); | ||
| }, [open]); |
Comment on lines
+7
to
+12
| * Three responsive tiers (mobile-first): | ||
| * - Phone (< sm): steps live in a slide-over drawer; the narrative and viewer | ||
| * share a single pane toggled by a Text / Image segmented control. | ||
| * - Tablet portrait (sm–lg): steps drawer + narrative and viewer side-by-side. | ||
| * - Desktop / landscape (lg+): the classic three columns — static 200px step | ||
| * sidebar + narrative (1/3) + viewer (remainder). |
Comment on lines
+62
to
+66
| const [rotateHintDismissed, setRotateHintDismissed] = useState( | ||
| () => | ||
| typeof window !== "undefined" && | ||
| window.sessionStorage?.getItem(ROTATE_HINT_DISMISSED_KEY) === "1" | ||
| ); |
Comment on lines
+114
to
+119
| <button | ||
| type="button" | ||
| onClick={dismissRotateHint} | ||
| className="inline-flex items-center justify-center min-w-9 min-h-9 -my-1 rounded text-charcoal/70 hover:text-charcoal hover:bg-black/5 transition-colors" | ||
| aria-label={t("shell.rotate_hint_dismiss")} | ||
| > |
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
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.
The compositor now adapts to phones and tablets, so a site can be built and edited from a touch device, not just a desktop. Every tab reflows to fit smaller screens with larger touch targets, sortable lists reorder by press-and-hold (so a normal swipe still scrolls), the story editor gains a responsive three-tier layout with a steps drawer and landscape-compact chrome, and the editor's image viewer gains a framing viewfinder for composing objects that stay visible on any visitor's screen.
See the CHANGELOG entry for v1.3.7-beta for the full list. No database migrations.