fix(Modal): overflow now works correctly on large mobile and bigger

kiwicom · Apr 18, 2024 · 6645070 · 6645070
1 parent 4c9d318
commit 6645070
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/packages/orbit-components/src/Modal/ModalFooter/index.tsx b/packages/orbit-components/src/Modal/ModalFooter/index.tsx
@@ -73,6 +73,7 @@ const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => {
         "z-overlay bg-white-normal px-md pb-md box-border flex w-full pt-0",
         "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",
+        "lm:rounded-b-modal",
         childrenLength > 1 ? "lm:justify-between" : "lm:justify-end",
         "[&_.orbit-modal-footer-child:last-of-type]:p-0",
       )}

diff --git a/packages/orbit-components/src/Modal/ModalHeader/index.tsx b/packages/orbit-components/src/Modal/ModalHeader/index.tsx
@@ -24,7 +24,8 @@ export const ModalHeaderWrapper = ({
       className={cx(
         className,
         "orbit-modal-header-container",
-        "box-border block w-full",
+        "rounded-t-modal box-border block w-full",
+        "lm:[&_~_.orbit-modal-section]:rounded-t-none",
         suppressed
           ? [
               "bg-cloud-light py-xl px-md lm:p-xl",

diff --git a/packages/orbit-components/src/Modal/ModalSection/index.tsx b/packages/orbit-components/src/Modal/ModalSection/index.tsx
@@ -29,6 +29,7 @@ export const ModalSectionWrapper = ({
         "orbit-modal-section",
         "py-lg px-md lm:p-xl box-border w-full",
         "border-b-elevation-flat-border-color border-b border-solid",
+        "lm:last-of-type:rounded-b-modal lm:first-of-type:rounded-t-modal",
         suppressed
           ? [
               "bg-cloud-light",

diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
@@ -435,11 +435,12 @@ const Modal = React.forwardRef<Instance, Props>(
           <div
             className={cx(
               "orbit-modal-wrapper-content",
-              "lm:rounded-modal overflow-y-auto overflow-x-hidden",
+              "lm:rounded-modal lm:overflow-visible overflow-y-auto overflow-x-hidden",
               "font-base bg-elevation-flat shadow-overlay absolute box-border w-full",
               "lm:relative lm:bottom-auto lm:pb-0",
               "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))]",
+              footerHeight && "lm:[&_.orbit-modal-section]:rounded-b-none",
               !hasModalSection &&
                 "[&_.orbit-modal-header-container]:mb-xl lm:[&_.orbit-modal-header-container]:mb-[var(--orbit-modal-footer-height,0px)]",
               isMobileFullPage
@@ -456,7 +457,7 @@ const Modal = React.forwardRef<Instance, Props>(
                   "[&_.orbit-modal-footer]:duration-fast [&_.orbit-modal-footer]:transition-shadow [&_.orbit-modal-footer]:ease-in-out",
                   fullyScrolled
                     ? "[&_.orbit-modal-footer]:shadow-modal-scrolled"
-                    : "[&_.orbit-modal-footer]:shadow-modal",
+                    : "[&_.orbit-modal-footer]:shadow-modal lm:[&_.orbit-modal-footer]:rounded-b-none",
                   "[&_.orbit-modal-section:last-of-type]:pb-lg [&_.orbit-modal-section:last-of-type]:mb-0",
                 ],
               fixedFooter