diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 710b2626..778a4b82 100644
--- 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
index 8a29f9de..37fcb137 100644
--- 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 && (
- <>
-
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus