fix: Parts of elements appear above the Modal actions area when scrol…

…ling (#575)
pluralsh · Mar 11, 2024 · d5c9108 · d5c9108
1 parent 45e7822
commit d5c9108
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 24 deletions.
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -88,6 +88,8 @@ const ModalContentSC = styled.div<{
   $scrollable: boolean
   $hasActions: boolean
 }>(({ theme, $scrollable, $hasActions }) => ({
+  position: 'relative',
+  zIndex: 0,
   margin: theme.spacing.large,
   marginBottom: $hasActions ? 0 : theme.spacing.large,
   ...theme.partials.text.body1,

diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx
@@ -1,9 +1,9 @@
-import { Div, H3, P } from 'honorable'
+import { Div, Flex, H3, P } from 'honorable'
 import { useState } from 'react'
 
 import styled from 'styled-components'
 
-import { Button, Card, Code, FormField, Input, Modal } from '..'
+import { Button, Card, Code, FormField, Input2, Modal, SearchIcon } from '..'
 import { SEVERITIES } from '../components/Modal'
 import { jsCode } from '../constants'
 
@@ -104,26 +104,18 @@ function Template(args: any) {
         )}
 
         {args.form && (
-          <>
-            <FormField
-              marginBottom="medium"
-              label="Name"
-            >
-              <Input value="Admin" />
+          <Flex
+            gap="medium"
+            direction="column"
+          >
+            <FormField label="Name">
+              <Input2 value="Admin" />
             </FormField>
-
-            <FormField
-              marginBottom="medium"
-              label="Description"
-            >
-              <Input value="Full account access" />
+            <FormField label="Description">
+              <Input2 value="Full account access" />
             </FormField>
-
-            <FormField
-              marginBottom="medium"
-              label="Repository bindings"
-            >
-              <Input value="*" />
+            <FormField label="Repository bindings">
+              <Input2 value="*" />
             </FormField>
             <P>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
@@ -138,7 +130,10 @@ function Template(args: any) {
               interdum, placerat dolor. Pellentesque et semper massa. Aliquam
               nec nisl eu nibh fringilla vehicula. Suspendisse a purus quam.
             </P>
-          </>
+            <FormField label="Repository bindings">
+              <Input2 startIcon={<SearchIcon />} />
+            </FormField>
+          </Flex>
         )}
       </Modal>
       <Card
@@ -247,21 +242,21 @@ function PinnedToTopTemplate(args: any) {
               marginBottom="medium"
               label="Name"
             >
-              <Input value="Admin" />
+              <Input2 value="Admin" />
             </FormField>
 
             <FormField
               marginBottom="medium"
               label="Description"
             >
-              <Input value="Full account access" />
+              <Input2 value="Full account access" />
             </FormField>
 
             <FormField
               marginBottom="medium"
               label="Repository bindings"
             >
-              <Input value="*" />
+              <Input2 value="*" />
             </FormField>
             <P>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus