From 610811480429788747c833285d2da4bdf23a916f Mon Sep 17 00:00:00 2001
From: Robin Cussol <me@robincussol.com>
Date: Fri, 17 Jan 2025 13:21:26 +0100
Subject: [PATCH] fix(Modal): ensure Modal has rounded bottom corners on larger
 viewports

Fixes FEPLT-2208
---
 .../src/Modal/Modal.ct-story.tsx              | 12 ++++++
 .../src/Modal/Modal.stories.tsx               | 38 +++++++++++++++++++
 packages/orbit-components/src/Modal/index.tsx |  1 +
 3 files changed, 51 insertions(+)

diff --git a/packages/orbit-components/src/Modal/Modal.ct-story.tsx b/packages/orbit-components/src/Modal/Modal.ct-story.tsx
index b29ce24d9d..53dfc88a9d 100644
--- a/packages/orbit-components/src/Modal/Modal.ct-story.tsx
+++ b/packages/orbit-components/src/Modal/Modal.ct-story.tsx
@@ -66,3 +66,15 @@ export function ModalVisualNoHeaderNoFooter({ isMobileFullPage = false }) {
     </Modal>
   );
 }
+
+export function ModalVisualHeaderOnly({ isMobileFullPage = false }) {
+  return (
+    <Modal onClose={() => {}} size={SIZES.NORMAL} isMobileFullPage={isMobileFullPage}>
+      <ModalHeader
+        title="Normal header"
+        illustration={<Illustration name="AppKiwi" size="small" />}
+        description="Lorem ispum dolor sit amet"
+      />
+    </Modal>
+  );
+}
diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
index 77e19df94a..e6c8f3aa4d 100644
--- a/packages/orbit-components/src/Modal/Modal.stories.tsx
+++ b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -459,6 +459,44 @@ export const WithItinerary: Story = {
   },
 };
 
+export const WithModalHeaderOnly: Story = {
+  render: args => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <Modal onClose={onClose} {...args}>
+          <ModalHeader
+            title="Enjoy something to eat while you fly"
+            illustration={<Illustration name="BaggageDrop" size="small" />}
+            description="Select a flight below to see the menu (where available)"
+          />
+        </Modal>
+      </Container>
+    );
+  },
+
+  args: {
+    mobileHeader: true,
+  },
+
+  parameters: {
+    info: "An example of a modal with a fixed footer. Check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: [
+        "size",
+        "title",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+      ],
+    },
+  },
+};
+
 type PlaygroundStoryProps = ModalPropsAndCustomArgs & { header: boolean; footer: boolean };
 export const Playground: StoryObj<PlaygroundStoryProps> = {
   render: ({
diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
index a99461c798..c305441885 100644
--- a/packages/orbit-components/src/Modal/index.tsx
+++ b/packages/orbit-components/src/Modal/index.tsx
@@ -440,6 +440,7 @@ const Modal = React.forwardRef<Instance, Props>(
               "lm:relative lm:bottom-auto lm:pb-0",
               "lm:[&_.orbit-modal-section:last-of-type]:pb-1000 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.1000))]",
+              "lm:[&:has(.orbit-modal-header-container:last-child)]:pb-1000",
               footerHeight && "lm:[&_.orbit-modal-section]:rounded-b-none",
               !hasModalSection &&
                 "[&_.orbit-modal-header-container]:mb-800 lm:[&_.orbit-modal-header-container]:mb-[var(--orbit-modal-footer-height,0px)]",