diff --git a/packages/orbit-components/src/Modal/ModalFooter/index.tsx b/packages/orbit-components/src/Modal/ModalFooter/index.tsx index 70a5e00f1d..f3cfd7d06a 100644 --- a/packages/orbit-components/src/Modal/ModalFooter/index.tsx +++ b/packages/orbit-components/src/Modal/ModalFooter/index.tsx @@ -47,7 +47,7 @@ const wrappedChildren = (children: React.ReactNode, flex: Props["flex"]) => { }; const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => { - const { isMobileFullPage, setFooterHeight } = React.useContext(ModalContext); + const { setFooterHeight } = React.useContext(ModalContext); const containerRef = React.useRef(null); const childrenLength = React.Children.toArray(children).length; @@ -74,7 +74,7 @@ const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => { "duration-fast transition-shadow ease-in-out", "sm:max-lm:[&_.orbit-button-primitive]:h-form-box-normal sm:max-lm:[&_.orbit-button-primitive]:text-button-normal", childrenLength > 1 ? "lm:justify-between" : "lm:justify-end", - !isMobileFullPage && "lm:rounded-b-modal", + "lm:rounded-b-modal", "[&_.orbit-modal-footer-child:last-of-type]:p-0", )} ref={containerRef} diff --git a/packages/orbit-components/src/Modal/ModalHeader/index.tsx b/packages/orbit-components/src/Modal/ModalHeader/index.tsx index 244a18b993..f718036532 100644 --- a/packages/orbit-components/src/Modal/ModalHeader/index.tsx +++ b/packages/orbit-components/src/Modal/ModalHeader/index.tsx @@ -26,15 +26,15 @@ export const ModalHeaderWrapper = ({ className={cx( className, "orbit-modal-header-container", - "box-border block w-full", + "lm:rounded-t-modal box-border block w-full", + !isMobileFullPage && "rounded-t-modal-mobile", + "lm:[&_~_.orbit-modal-section:first-of-type]:rounded-t-none [&_~_.orbit-modal-section:first-of-type]:rounded-t-none", suppressed ? [ "bg-cloud-light py-xl px-md lm:p-xl", "[&_~_.orbit-modal-section:first-of-type]:border-t-elevation-flat-border-color [&_~_.orbit-modal-section:first-of-type]:!mt-0 [&_~_.orbit-modal-section:first-of-type]:border-t [&_~_.orbit-modal-section:first-of-type]:border-solid", ] : ["bg-white-normal pt-lg px-md lm:pt-xl lm:px-xl lm:pb-0 pb-0"], - !isMobileFullPage && "rounded-t-modal-mobile", - "lm:[&_~_.orbit-modal-section:first-of-type]:rounded-t-none [&_~_.orbit-modal-section:first-of-type]:rounded-t-none", )} data-test={dataTest} > diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx index 3fb399f2f6..55cf2552f9 100644 --- a/packages/orbit-components/src/Modal/index.tsx +++ b/packages/orbit-components/src/Modal/index.tsx @@ -440,15 +440,12 @@ const Modal = React.forwardRef( "lm:relative lm:bottom-auto lm:pb-0 lm:overflow-visible", "lm:[&_.orbit-modal-section:last-of-type]:pb-xxl lm:[&_.orbit-modal-section:last-of-type:after]:content-none lm:[&_.orbit-modal-section:last-of-type]:mb-[var(--orbit-modal-footer-height,0px)]", "lm:[&_.orbit-modal-mobile-header]:w-[calc(var(--orbit-modal-width)-48px-theme(spacing.xxl))]", + "lm:rounded-modal", !hasModalSection && "[&_.orbit-modal-header-container]:mb-xl lm:[&_.orbit-modal-header-container]:mb-[var(--orbit-modal-footer-height,0px)]", isMobileFullPage ? "top-0 max-h-full" - : [ - "rounded-t-modal-mobile", - "lm:rounded-modal", - scrolled && "[&_.orbit-modal-mobile-header]:top-xl", - ], + : ["rounded-t-modal-mobile", scrolled && "[&_.orbit-modal-mobile-header]:top-xl"], fixedFooter && footerHeight && [ "[&_.orbit-modal-footer]:p-md [&_.orbit-modal-footer]:fixed [&_.orbit-modal-footer]:bottom-0",