fix: fix filter drawer being open below resource action content

SoftwareBrothers · Jan 24, 2024 · cc2f652 · cc2f652
1 parent 4bd8378
commit cc2f652
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/frontend/components/routes/resource-action.tsx b/src/frontend/components/routes/resource-action.tsx
@@ -13,6 +13,7 @@ import { NoActionError, NoResourceError } from '../app/error-message.js'
 import FilterDrawer from '../app/filter-drawer.js'
 import { ActionHeader } from '../app/index.js'
 import Wrapper from './utils/wrapper.js'
+import { getResourceElementCss } from '../../utils/data-css-name.js'
 
 type PropsFromState = {
   resources: Array<ResourceJSON>
@@ -36,6 +37,8 @@ const ResourceAction: React.FC<Props> = (props) => {
     return <NoActionError resourceId={resourceId!} actionName={actionName!} />
   }
 
+  const contentTag = getResourceElementCss(resource.id, action.name)
+
   if (action.showInDrawer) {
     return (
       <DrawerPortal width={action.containerWidth}>
@@ -45,8 +48,8 @@ const ResourceAction: React.FC<Props> = (props) => {
   }
 
   return (
-    <Wrapper width={action.containerWidth} showFilter={action.showFilter}>
-      <Box flex flexDirection="column">
+    <Wrapper width={action.containerWidth} showFilter={action.showFilter} data-css={contentTag}>
+      <Box flex flexDirection="column" flexGrow={1}>
         <ActionHeader
           resource={resource}
           action={action}
@@ -55,7 +58,7 @@ const ResourceAction: React.FC<Props> = (props) => {
         />
         <BaseActionComponent action={action} resource={resource} setTag={setTag} />
       </Box>
-      {action.showFilter ? <FilterDrawer resource={resource} /> : ''}
+      {action.showFilter && <FilterDrawer resource={resource} />}
     </Wrapper>
   )
 }

diff --git a/src/frontend/components/routes/utils/wrapper.tsx b/src/frontend/components/routes/utils/wrapper.tsx
@@ -6,8 +6,6 @@ import allowOverride from '../../../hoc/allow-override.js'
 
 const StyledWrapperWithFilter = styled(Box)`
   & > ${Drawer} {
-    position: relative;
-    box-shadow: none;
     border-radius: ${({ theme }) => theme.space.sm};
   }