feat(composedmodal): L3-10803 style updates to composed modal pin footer at bottom and go fullscreen on mobile by scottdickerson · Pull Request #770 · PhillipsAuctionHouse/seldon

scottdickerson · 2025-11-20T20:01:57Z

Jira ticket

Screenshots

Before	After

On Chromatic you'll see that now we have both desktop and mobile breakpoints for all the stories:

Figma link

Figma Link

Summary

This pull request introduces improvements to modal components and Storybook configuration, focusing on better responsive behavior and enhanced modal footer handling. The main changes include dynamic footer height measurement for ComposedModal, updated Storybook viewports for more accurate previews on mobile components, and improved styling for modals to support mobile and desktop layouts.

Modal Component Enhancements

Added dynamic measurement of the modal footer height in ComposedModal, using useRef, useState, and ResizeObserver to set a CSS variable for responsive layout adjustments. The footer is now rendered as a dedicated element with a reference. (src/components/ComposedModal/ComposedModal.tsx) [1] [2] [3] [4]
Updated modal and footer styles to use CSS variables for height, improved mobile responsiveness, and ensured the modal body and footer are laid out correctly across viewports. (src/components/ComposedModal/_composedModal.scss) [1] [2] [3] [4]

Storybook Configuration and Stories

Configured Storybook to support custom viewports for mobile, tablet, and desktop, set the default viewport to desktop, and added Chromatic visual regression viewports. (.storybook/preview.tsx)
Updated modal and composed modal stories to open modals by default for easier previewing, and added empty tags arrays for consistency. (src/components/ComposedModal/ComposedModal.stories.tsx, src/components/Modal/Modal.stories.tsx) [1] [2] [3] [4] [5]
Changed the mobile form story to use Storybook globals for viewport selection instead of parameters, aligning with the new configuration. (src/patterns/ProgressWizard/ProgressWizard.stories.tsx)

Minor Style Adjustments

Adjusted margin for the viewing details content for better visual spacing. (src/patterns/ViewingDetails/_viewingDetails.scss)

Acceptance Test (how to verify the PR)

Check the ComposedModal at mobile breakpoints

Regression Test

Regression test the other modals using ComposedModals
Confirm the differences in the storybook chromatic visual tests (FYI there will be 200 new stories because of running at the second viewport)

Evidence of testing

Post logs, screenshots, etc

Things to look for during review

PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
All commit messages follow convention and are appropriate for the changes
All references to phillips class prefix are using the prefix variable
All major areas have a data-testid attribute.
Document all props with jsdoc comments
All strings should be translatable.
Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

Are there any accessibility considerations that need to be taken into account and tested?
Default story called "Playground" should be created for all new components
Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
Export the component and its typescript type from the index.ts file
Import the component scss file into the componentStyles.scss file.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…PhillipsAuctionHouse/seldon into L3-10803-composed-modal-styles

netlify · 2025-11-20T20:02:02Z

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	`8d7a5f1`
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/691f75e0ccd09300080b9ffb
😎 Deploy Preview	https://deploy-preview-770--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull Request Overview

This PR enhances the ComposedModal component to support a pinned footer at the bottom and full-screen behavior on mobile devices. The changes introduce dynamic footer height measurement using ResizeObserver and CSS custom properties to ensure proper layout across different viewports.

Key changes:

Dynamic footer height tracking in ComposedModal using refs, state, and ResizeObserver to calculate and apply footer positioning
Updated SCSS styles to position the footer absolutely at the bottom, adjust modal dimensions for mobile/desktop, and use CSS variables for responsive spacing
Storybook configuration updates including custom viewport definitions, default viewport settings, and Chromatic visual regression viewports

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`src/components/ComposedModal/ComposedModal.tsx`	Added footer ref, height state, and `ResizeObserver` logic to dynamically measure footer height; applied CSS variable to modal style
`src/components/ComposedModal/_composedModal.scss`	Refactored styles to use absolute positioning for footer, added mobile fullscreen layout, and applied CSS variables for dynamic height calculations
`src/components/ComposedModal/ComposedModal.stories.tsx`	Changed default `isOpen` state to `true` in stories and added empty `tags` array
`src/components/Modal/Modal.stories.tsx`	Changed default `isOpen` state to `true` in stories and added empty `tags` array
`.storybook/preview.tsx`	Added custom viewport configurations, set default viewport to desktop, configured Chromatic viewports, and removed unused React import
`src/patterns/ProgressWizard/ProgressWizard.stories.tsx`	Migrated viewport configuration from `parameters` to `globals` API
`src/patterns/ViewingDetails/_viewingDetails.scss`	Simplified margin styling by removing `margin-top` and updating `margin-bottom`

Copilot · 2025-11-20T20:04:41Z

src/components/ComposedModal/ComposedModal.tsx

+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [secondaryButton, primaryButton, footerContent, footerHeight]);


The footerHeight state variable is included in the useEffect dependency array, but it's updated within the effect's callback. This creates an unnecessary re-run of the effect whenever footerHeight changes. Since the ResizeObserver already handles dynamic measurements, footerHeight should be removed from the dependencies to avoid potential infinite loops or redundant observer setup/teardown cycles.

Suggested change

}, [secondaryButton, primaryButton, footerContent, footerHeight]);

}, [secondaryButton, primaryButton, footerContent]);

Copilot · 2025-11-20T20:04:42Z

src/components/ComposedModal/ComposedModal.tsx

+      };
+
+      // Initial measurement
+      requestAnimationFrame(measureFooter);


The requestAnimationFrame call for initial measurement is not cancelled if the component unmounts before the frame executes. This could lead to a state update on an unmounted component. Consider storing the returned frame ID and cancelling it in the cleanup function using cancelAnimationFrame.

Copilot · 2025-11-20T20:04:42Z

src/components/ComposedModal/_composedModal.scss

-  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: min(fit-content, calc(100svh - (2 * var(--modal-footer-height, 0px))));


The calculation 100svh - (2 * var(--modal-footer-height, 0px)) subtracts twice the footer height, but the footer only appears once. This appears to be incorrect and may cause unexpected layout issues. The calculation should likely be 100svh - var(--modal-footer-height, 0px) unless there's a specific reason for doubling the footer height.

Suggested change

height: min(fit-content, calc(100svh - (2 * var(--modal-footer-height, 0px))));

height: min(fit-content, calc(100svh - var(--modal-footer-height, 0px)));

Copilot · 2025-11-20T20:04:42Z

src/components/ComposedModal/_composedModal.scss

+  height: min(fit-content, calc(100svh - (2 * var(--modal-footer-height, 0px))));
+  max-height: 100svh;
+  min-width: 35rem;
+  overflow: auto;


Setting overflow: auto on the modal container combined with overflow-y: auto on the body (line 27) creates nested scrollable regions. This can lead to confusing scroll behavior for users. Consider managing overflow only at the body level to maintain a single, predictable scroll context.

Suggested change

overflow: auto;

/* Removed overflow: auto; to prevent nested scroll regions */

Copilot · 2025-11-20T20:04:43Z

src/components/ComposedModal/_composedModal.scss

+  &__footer {
+    background-color: $white-100;
+    bottom: 0;
+    padding-bottom: $spacing-md;
+    position: absolute;
+    width: 100%;
+  }


The absolutely positioned footer with width: 100% may overflow the modal container if the modal has padding or borders. Additionally, absolute positioning requires the parent to have position: relative set. The modal container (.#{$px}-composed-modal) should explicitly set position: relative to establish a positioning context for the footer.

Copilot · 2025-11-20T20:04:43Z

src/components/ComposedModal/_composedModal.scss

-    margin: 0 $spacing-lg $spacing-md;
-    max-height: var('--max-modal-body-height');
+    max-height: min(fit-content, calc(100% - var(--modal-footer-height, 0px)));
    overflow-y: auto;


[nitpick] Adding padding-bottom: var(--modal-footer-height) to create space for the absolutely positioned footer is correct, but this creates a dependency between the body padding and footer positioning. If the footer height changes before the CSS variable updates, content may be obscured. Consider documenting this relationship in a comment for future maintainers.

Suggested change

overflow-y: auto;

overflow-y: auto;

// NOTE: This padding-bottom must match the height of the absolutely positioned footer.

// If the footer height changes, ensure --modal-footer-height is updated to prevent content from being obscured.

Copilot · 2025-11-20T20:04:43Z

src/components/ComposedModal/ComposedModal.tsx

+        style={
+          {
+            '--modal-footer-height': footerHeight,
+          } as React.CSSProperties
+        }


The new dynamic footer height functionality using CSS custom properties lacks test coverage. The existing test file doesn't verify that the --modal-footer-height CSS variable is correctly set or that the ResizeObserver properly updates it. Add tests to ensure this critical responsive behavior works as expected.

github-actions · 2025-11-20T20:05:46Z

🚀 Storybook preview is ready.

• Preview: https://68b9f094608b90f3cfec5a06-tbeasoynte.chromatic.com/
• Chromatic build: https://www.chromatic.com/build?appId=68b9f094608b90f3cfec5a06&number=291

netlify · 2026-01-15T17:54:04Z

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	`b6adb86`
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/696929bae775ce000858e2ff
😎 Deploy Preview	https://deploy-preview-770--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

smarks8 · 2026-01-15T18:08:07Z

looks similar to another open pr: L3-10837-add-min-widths-to-modals https://phillipsauctions.atlassian.net/browse/L3-10837

The figma linked in that ticket (which is from design) doesn't have the modal going full screen on mobile . It also has defined widths at each breakpoint

smarks8 · 2026-01-15T18:25:42Z

src/components/ComposedModal/ComposedModal.stories.tsx


 export const Playground = (props: ComposedModalProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);


This makes it easier to see per story, but it opens them all at the same time in the overview, not sure if that would cause issues in chromatic

smarks8 · 2026-01-15T18:26:47Z

src/components/ComposedModal/_composedModal.scss

  border-radius: $radius-md;
-  max-width: 95vw;
-  min-width: 0;
+  display: flex;


I think we might want to use the changes in Aaron's pr for the modal

scottdickerson and others added 7 commits November 20, 2025 12:54

fix(composedmodal): pin footer to bottom of screen on mobile

5f3e680

fix(composedmodal): update body footer height var

970a298

test(modal): update the testcase for modal from drawer

8d159ad

fix(composedmodal): set min width for modal

f58aef5

Update src/components/ComposedModal/ComposedModal.tsx

fe2fd28

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix(composedModal): css style fixes for height

a6a534f

Merge branch 'L3-XXXX-composedmodalstylefixes' of https://github.com/…

ac2f6d1

…PhillipsAuctionHouse/seldon into L3-10803-composed-modal-styles

Copilot AI review requested due to automatic review settings November 20, 2025 20:01

scottdickerson requested review from DaveMcNamara, SRangineni88, Zach-OfAllTrades, aahill50, adietrich3074, constantinehuzenko, davidicus, sgrund14, smarks8 and zhenpanda as code owners November 20, 2025 20:01

Copilot started reviewing on behalf of scottdickerson November 20, 2025 20:02 View session

Copilot finished reviewing on behalf of scottdickerson November 20, 2025 20:03

Copilot AI reviewed Nov 20, 2025

View reviewed changes

test(chromatic): update mobile viewport height

1a931d7

test(chromatic): update mobile viewport height

8d7a5f1

scottdickerson changed the title ~~feat(composedmodal): L3-10803 pin style updates to composed modal pin footer at bottom and go fullscreen on mobile~~ feat(composedmodal): L3-10803 style updates to composed modal pin footer at bottom and go fullscreen on mobile Nov 20, 2025

scottdickerson added the DO_NOT_MERGE Either in feature freeze mode or not ready for merge label Dec 3, 2025

Merge branch 'main' into L3-10803-composed-modal-styles

b6adb86

smarks8 reviewed Jan 15, 2026

View reviewed changes

scottdickerson closed this Feb 6, 2026

	}, [secondaryButton, primaryButton, footerContent, footerHeight]);
	}, [secondaryButton, primaryButton, footerContent]);

	height: min(fit-content, calc(100svh - (2 * var(--modal-footer-height, 0px))));
	height: min(fit-content, calc(100svh - var(--modal-footer-height, 0px)));

	overflow: auto;
	/* Removed overflow: auto; to prevent nested scroll regions */

Conversation

scottdickerson commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for phillips-seldon ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for phillips-seldon ready!

Uh oh!

smarks8 commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

smarks8 Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

smarks8 Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

scottdickerson commented Nov 20, 2025 •

edited

Loading

netlify bot commented Nov 20, 2025 •

edited

Loading

github-actions bot commented Nov 20, 2025 •

edited

Loading

netlify bot commented Jan 15, 2026 •

edited

Loading

smarks8 commented Jan 15, 2026 •

edited

Loading

smarks8 Jan 15, 2026 •

edited

Loading