packages/app/src/components/filter-fields/Wrapper.tsx

@@ -18,7 +18,7 @@ const LDFilterWrapper: FC<Props> = function(props) {
   }
 
   return (
-    <Card>
+    <Card className="ld-filter">
       <form data-testid={props['data-testid']} onSubmit={onSubmit}>
         <Space wrap className="ld-filter-field-group">
           {children}

packages/app/src/components/filter-fields/index.css

@@ -1,3 +1,7 @@
+.ld-filter {
+  z-index: 9;
+}
+
 .ld-filter-field-label {
   display: block;
   min-width: 5em;
@@ -5,10 +9,6 @@
   line-height: 2.2;
 }
 
-.ld-filter-field-select {
-  min-width: 180px;
-}
-
 .ld-filter-field {
   display: flex;
   flex-wrap: wrap;
@@ -27,10 +27,11 @@
 
   & > .ant-space-item {
     width: calc(25% - 16px * 3 / 4);
+    container: field / inline-size;
   }
 }
 
-@media screen and (width <= 1300px) {
+@container field (width < 240px) {
   .ld-filter-field {
     flex-direction: column;
     align-items: flex-start;

packages/app/src/components/table-wrapper/index.css

@@ -1,3 +1,4 @@
 .ld-table-wrapper {
+  z-index: 1;
   margin-top: var(--content-padding);
 }