BDMS-924: Well detail responsive layout and breakpoints#302
Conversation
When edit or help panels shrink the page, cards stack in mobile order instead of staying in a crushed two-column grid. CoreWellInfo stats also stack on narrow cards.
Documents SCREENS scale in constants, Tailwind, and MUI. Get Help goes full-screen on phones, closes edit panel when opened, and well edit closes Get Help. Header actions wrap with better touch targets.
…eight. Removed panel mutex so users can file a bug without closing draft edits. Dropped min-h-9 on header actions so Preview PDF and Edit stay at sm size.
jeremyzilar
requested review from
TylerAdamMartinez and
chasetmartin
and removed request for
TylerAdamMartinez
Preview DeploymentPreview URL: https://preview-bdms-924-responsive-breakpoints-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
|
Breakpoints and overall panel functionality looks great to me. I did notice that if a user is editing groups in the edit panel, then resizes over the smallest breakpoint, the edits are lost. See video: |
Preview DeploymentPreview URL: https://preview-bdms-924-responsive-breakpoints-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
Use one panel wrapper that switches layout classes instead of separate mobile and desktop trees, so WellEditPanel does not remount and lose unsaved group edits.
Preview DeploymentPreview URL: https://preview-bdms-924-responsive-breakpoints-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
1 similar comment
Preview DeploymentPreview URL: https://preview-bdms-924-responsive-breakpoints-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
Thanks @chasetmartin -- I think this should be fixed now 🌟 |
chasetmartin
left a comment
chasetmartin
left a comment
There was a problem hiding this comment.
That fix worked for me, looks good.
The temporary logs were dumping full well details JSON on every page load.
Puts v1.0.1 under the footer links so Get Help sits at the bottom without extra gap.
Preview DeploymentPreview URL: https://preview-bdms-924-responsive-breakpoints-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
2 participants
Summary
SCREENSbreakpoint scale insrc/constants/breakpoints.ts, Tailwind@theme, and MUItheme.breakpointsuseIsMobileat tablet (640px), Get Help full-screen overlay on phones, sidebar/header use named Tailwind breakpointsStacks on #300 (BDMS-879 edit panel). Feature doc:
the-braindocs/product/features/well-show-responsive.md.Jira: https://nmbgmr.atlassian.net/browse/BDMS-924
Test plan
smheight (not oversized)npm run buildand well-show tests pass