Modal visual adjustments

app/react/App/styles/globals.css

@@ -1053,6 +1053,10 @@ input:checked + .toggle-bg {
   position: sticky;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -1445,6 +1449,10 @@ input:checked + .toggle-bg {
   max-height: calc(100vh - 9rem);
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .min-h-fit {
   min-height: -moz-fit-content;
   min-height: fit-content;
@@ -5124,6 +5132,10 @@ input:checked + .toggle-bg {
     display: none;
   }
 
+  .md\:h-\[70vh\] {
+    height: 70vh;
+  }
+
   .md\:h-auto {
     height: auto;
   }

app/react/V2/Components/UI/Modal.tsx

@@ -21,14 +21,13 @@ const Modal = ({ children, size }: ModalProps) => {
   return (
     <div
       aria-hidden="false"
-      className={`fixed top-0 right-0 left-0 z-50 h-modal overflow-y-auto overflow-x-hidden 
-        md:inset-0 md:h-full items-center justify-center flex bg-gray-900 bg-opacity-50`}
+      className="fixed inset-0 top-0 left-0 z-50 flex items-center justify-center overflow-x-hidden bg-gray-900 bg-opacity-50"
       data-testid="modal"
       role="dialog"
       aria-label="Modal"
     >
-      <div className={`relative h-full w-full p-4 md:h-auto ${sizes[size]}`}>
-        <div className="relative bg-white rounded-lg shadow">{children}</div>
+      <div className={`max-h-screen ${sizes[size]}`}>
+        <div className="bg-white rounded-lg shadow">{children}</div>
       </div>
     </div>
   );
@@ -42,15 +41,15 @@ interface ModalChildrenProps {
 Modal.Header = ({ children, className }: ModalChildrenProps) => (
   <div
     className={`${className} flex items-start justify-between rounded-t ${
-      children ? 'border-b p-5' : 'p-2'
+      children ? 'p-5 border-b' : 'p-2'
     }`}
   >
     {children}
   </div>
 );
 
 Modal.Body = ({ children, className }: ModalChildrenProps) => (
-  <div className={`${className} p-6 `} data-testid="modal-body">
+  <div className={`p-6 overflow-y-auto h-full md:h-[70vh] ${className}`} data-testid="modal-body">
     {children}
   </div>
 );

app/react/V2/Routes/Settings/Languages/LanguagesList.tsx

@@ -176,7 +176,7 @@ const LanguagesList = () => {
         </SettingsContent.Footer>
       </SettingsContent>
       {showModal && (
-        <div className="container w-10 h10">
+        <div className="container w-10 h-10">
           <ConfirmationModal {...modalProps} size="md" />
         </div>
       )}

app/react/stories/ConfirmationModal.stories.tsx

@@ -26,7 +26,7 @@ const Primary: Story = {
   render: args => (
     <Provider store={createStore()}>
       <div className="tw-content">
-        <div className="container w-10 h10">
+        <div className="container w-10 h-10">
           <ConfirmationModal
             header={args.header}
             body={args.body}

app/react/stories/Modal.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Modal } from 'V2/Components/UI/Modal';
 import { Button } from 'V2/Components/UI/Button';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import { GeneratedContent } from './helpers/GeneratedContent';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
@@ -14,9 +15,7 @@ type Story = StoryObj<typeof Modal>;
 const Primary: Story = {
   render: args => (
     <div className="tw-content">
-      <div className="container w-10 h10">
-        <Modal size={args.size}>{args.children}</Modal>
-      </div>
+      <Modal size={args.size}>{args.children}</Modal>
     </div>
   ),
 };
@@ -60,7 +59,7 @@ const Warning = {
         <h3 className="mb-5 text-lg font-normal text-gray-500">
           Are you sure you want to delete this product?
         </h3>
-        <div className="flex justify-center gap-4">
+        <div className="flex gap-4 justify-center">
           <Button styling="light" className="grow">
             No, cancel
           </Button>
@@ -74,6 +73,29 @@ const Warning = {
   },
 };
 
-export { Basic, Warning };
+const LargeContent = {
+  ...Primary,
+  args: {
+    children: (
+      <>
+        <Modal.Header>
+          <h3 className="text-xl font-medium text-gray-900">Information modal</h3>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <GeneratedContent />
+        </Modal.Body>
+        <Modal.Footer>
+          <Button styling="light" className="grow">
+            Close
+          </Button>
+        </Modal.Footer>
+      </>
+    ),
+    size: 'xxxl',
+  },
+};
+
+export { Basic, Warning, LargeContent };
 
 export default meta;

app/react/stories/Sidepanel.stories.tsx

@@ -5,38 +5,13 @@ import { Provider } from 'react-redux';
 import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
 import { Sidepanel } from 'V2/Components/UI';
 import { SidePanelProps } from 'app/V2/Components/UI/Sidepanel';
+import { GeneratedContent } from './helpers/GeneratedContent';
 
 const meta: Meta<typeof Sidepanel> = {
   title: 'Components/Sidepanel',
   component: Sidepanel,
 };
 
-const SidepanelContent = () => {
-  const contents: React.ReactNode[] = [];
-
-  for (let index = 1; index < 8; index += 1) {
-    contents.push(
-      <>
-        <h1 className="font-bold">Item {index}</h1>
-        <p className="mb-1">
-          Fusce id mi eu mauris bibendum dignissim nec in sem. Sed ultrices varius mauris quis
-          placerat. Donec imperdiet sodales diam sed imperdiet. Aenean a nisl venenatis lectus
-          mattis pellentesque. Duis fermentum ante a ultricies feugiat. Proin dapibus luctus purus
-          id viverra. Aenean a aliquet nibh. Aenean facilisis justo quis sem auctor, nec mollis
-          tortor placerat. Cras eget enim mollis, mollis risus gravida, pharetra risus. Mauris
-          dapibus malesuada mi, quis ornare felis imperdiet eget. Donec sed quam non dolor sodales
-          hendrerit. Aenean suscipit, velit sed laoreet cursus, ante odio tristique lectus, a porta
-          eros felis eu sem. Curabitur eu gravida dolor. Ut iaculis lacus vitae libero viverra
-          interdum. Phasellus ac est consectetur, malesuada nisl nec, blandit lorem.
-        </p>
-        <hr className="mb-2" />
-      </>
-    );
-  }
-
-  return <>{contents.map(content => content)}</>;
-};
-
 const SidePanelContainer = (args: SidePanelProps) => {
   const [showSidepanel, setShowSidepanel] = useState(false);
 
@@ -88,7 +63,7 @@ const SidePanelContainer = (args: SidePanelProps) => {
 
             <button
               type="button"
-              className="p-1 text-white border-2 rounded border-primary-400 bg-primary-400"
+              className="p-1 text-white rounded border-2 border-primary-400 bg-primary-400"
               onClick={() => setShowSidepanel(!showSidepanel)}
             >
               Open/Close sidepanel
@@ -101,7 +76,7 @@ const SidePanelContainer = (args: SidePanelProps) => {
             closeSidepanelFunction={() => setShowSidepanel(false)}
             size={args.size}
           >
-            <SidepanelContent />
+            <GeneratedContent />
           </Sidepanel>
         </div>
       </div>

app/react/stories/helpers/GeneratedContent.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const GeneratedContent = ({ rows }: { rows?: number }) => {
+  const maxRows = rows || 8;
+  const contents: React.ReactNode[] = [];
+
+  for (let index = 1; index < maxRows; index += 1) {
+    contents.push(
+      <>
+        <h1 className="font-bold">Item {index}</h1>
+        <p className="mb-1">
+          Fusce id mi eu mauris bibendum dignissim nec in sem. Sed ultrices varius mauris quis
+          placerat. Donec imperdiet sodales diam sed imperdiet. Aenean a nisl venenatis lectus
+          mattis pellentesque. Duis fermentum ante a ultricies feugiat. Proin dapibus luctus purus
+          id viverra. Aenean a aliquet nibh. Aenean facilisis justo quis sem auctor, nec mollis
+          tortor placerat. Cras eget enim mollis, mollis risus gravida, pharetra risus. Mauris
+          dapibus malesuada mi, quis ornare felis imperdiet eget. Donec sed quam non dolor sodales
+          hendrerit. Aenean suscipit, velit sed laoreet cursus, ante odio tristique lectus, a porta
+          eros felis eu sem. Curabitur eu gravida dolor. Ut iaculis lacus vitae libero viverra
+          interdum. Phasellus ac est consectetur, malesuada nisl nec, blandit lorem.
+        </p>
+        <hr className="mb-2" />
+      </>
+    );
+  }
+
+  return <>{contents.map(content => content)}</>;
+};
+
+export { GeneratedContent };