TT-7266 Enhance FaithBridge and FindAquifer components for mobile experience#300
Merged
sarahentzel merged 4 commits intodevelopfrom May 8, 2026
Merged
TT-7266 Enhance FaithBridge and FindAquifer components for mobile experience#300sarahentzel merged 4 commits intodevelopfrom
sarahentzel merged 4 commits intodevelopfrom
Conversation
added 4 commits
May 7, 2026 16:47
- 📱 Mobile & Layout Improvements - Custom Dialog Widths: Added a mobilePaperWidth prop to the BigDialog component, allowing for better control over how wide dialogs appear on phones. - Flexible Tabs: Updated FindTabs with a fillParent option and the ability to apply custom styles (contentSx) based on screen size. - Refined Mobile Views: Adjusted the PassageDetail mobile layout to use these new width and padding options for a cleaner look. - 🎨 Styling & Component Flexibility - Better Content Control: Added a dialogContentSx prop to BigDialog, making it easier to style the internal content area without hacking the component. - Button & UI Polish: Improved the AltButton inside the Faithbridge Iframe to ensure it stays visible and aligned correctly when using fixed footers. - 🖼️ Iframe & Footer Enhancements - Faithbridge Iframe Updates: Added support for fixed footers and improved how the iframe handles different screen sizes. - Bible Brain put buttons in footer too. Responsive Fixes: Cleaned up text alignment and overflow issues to ensure the UI doesn't break on smaller screens. In short: You've made the BigDialog, FindTabs, and FaithbridgeIframe components much more flexible by adding props for custom widths, padding, and footer behaviors, specifically targeting a better experience on mobile.
- 📱 Mobile Improvements: Integrated responsive design elements in FindAquifer, including a new mobile layout with cards and checkboxes for better usability on smaller screens. - 🔄 Row Selection Logic: Updated row selection handling to ensure consistent behavior across mobile and desktop views. - 🖼️ Preview Dialog: Added a preview dialog for media types, enhancing user interaction with content. - 🧩 FindTabs Update: Adjusted FindTabs to accommodate the new aquifer tab and improved styling based on screen size. These changes aim to provide a more intuitive and accessible experience for users on mobile devices.
- 🛠️ Error Handling: Added a call to setAdding(false) in FindAquifer to ensure the adding state is reset upon error. - 📏 Layout Adjustment: Updated BigDialog's maxHeight to account for vertical margins, preventing overflow in mobile views. These changes enhance user experience by improving error management and ensuring dialogs fit within the viewport.
- 📱 Mobile Layout: Integrated responsive design adjustments in the preview dialog, including dynamic dialog content styling and mobile-specific properties for better usability. - 🖼️ Media Preview: Wrapped media elements in Box components to ensure proper width handling and overflow management. - 🔄 Alignment Fix: Updated alignment properties in the dialog to enhance visual consistency. These changes aim to provide a more user-friendly experience on mobile devices while interacting with the FindAquifer component.
gtryus
changed the title
sarahentzel
approved these changes
May 8, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the renderer’s “Find resources” mobile experience by making dialogs and tab content layout more responsive, adding fixed-footer layouts for action buttons on small screens, and introducing a mobile-friendly Aquifer results UI with preview support.
Changes:
- Extended
BigDialogto support a configurable mobile paper width and customDialogContentsxstyling for better mobile layouts. - Updated
FindTabs,FindBibleBrain, andFaithbridgeIframeto support small-screen flex/overflow behavior and fixed-footer action layouts. - Enhanced
FindAquiferwith mobile card-based results + checkbox selection, improved row selection sorting, and a richer preview dialog.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/renderer/src/hoc/BigDialog.tsx |
Adds mobilePaperWidth and dialogContentSx to enable constrained, flex-friendly mobile dialogs. |
src/renderer/src/components/PassageDetail/Internalization/PassageDetailsArtifactsMobile.tsx |
Uses new BigDialog props to make the research dialog fill/scroll correctly on mobile. |
src/renderer/src/components/PassageDetail/Internalization/FindTabs.tsx |
Refactors tab panels for small-screen flex layouts and overflow handling, wiring fixed-footer modes into child tabs. |
src/renderer/src/components/PassageDetail/Internalization/FindBibleBrain.tsx |
Adds an optional fixed-footer layout variant for mobile to keep action buttons visible. |
src/renderer/src/components/PassageDetail/Internalization/FindAquifer.tsx |
Introduces mobile card layout + checkbox selection, preview dialog improvements, and numeric sort fix for selected rows. |
src/renderer/src/components/PassageDetail/Internalization/FaithbridgeIframe.tsx |
Adds fixed-footer layout with full-height iframe and a loading overlay for small screens. |
src/renderer/src/__tests__/FaithbridgeIframe.test.tsx |
Updates iframe style assertion to reflect new styling. |
Comment on lines
+83
to
+85
| minHeight: mobilePaperWidth | ||
| ? 'min(92dvh, calc(100dvh - 24px))' | ||
| : '50%', |
Comment on lines
+262
to
+265
| expect(iframe).toHaveAttribute( | ||
| 'style', | ||
| 'width: 100%; height: 600px; display: block; overflow: hidden;' | ||
| ); |
Comment on lines
+273
to
+326
| return connected ? ( | ||
| fixedFooterLayout ? ( | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| flex: 1, | ||
| minHeight: 0, | ||
| height: '100%', | ||
| width: '100%', | ||
| }} | ||
| > | ||
| <Box | ||
| sx={{ | ||
| position: 'relative', | ||
| flex: '1 1 0px', | ||
| minHeight: 0, | ||
| width: '100%', | ||
| overflow: 'hidden', | ||
| }} | ||
| > | ||
| <iframe | ||
| src={iframeSrc} | ||
| title={FaithBridge} | ||
| style={{ | ||
| border: 'none', | ||
| display: 'block', | ||
| width: '100%', | ||
| height: '100%', | ||
| minHeight: 0, | ||
| overflow: 'hidden', | ||
| }} | ||
| allowFullScreen | ||
| allow="microphone; clipboard-write" | ||
| /> | ||
| {loading ? ( | ||
| <Box | ||
| sx={{ | ||
| position: 'absolute', | ||
| left: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| bgcolor: 'action.hover', | ||
| px: 1, | ||
| py: 0.5, | ||
| }} | ||
| > | ||
| {t.loading} | ||
| </Box> | ||
| ) : null} | ||
| </Box> | ||
| {actionFooter} | ||
| </Box> | ||
| ) : ( |
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.
These changes aim to provide a more intuitive and accessible experience for users on mobile devices.