fix restriction list not working on smaller screens

Coflnet · Mar 18, 2024 · ccf504a · ccf504a
1 parent 1bcd6bf
commit ccf504a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/components/Flipper/FlipRestrictionList/FlipRestrictionList.module.css b/components/Flipper/FlipRestrictionList/FlipRestrictionList.module.css
@@ -1,6 +1,20 @@
 .restrictionList {
     flex: 1 1 auto;
     overflow-y: auto;
+    min-height: 200px;
+}
+
+.restrictionListContainer{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+}
+
+@media all and (max-height: 1000px) {
+    .restrictionListContainer {
+        overflow-y: auto;
+    }
 }
 
 .restrictionContainer {

diff --git a/components/Flipper/FlipRestrictionList/FlipRestrictionList.tsx b/components/Flipper/FlipRestrictionList/FlipRestrictionList.tsx
@@ -387,15 +387,14 @@ function FlipRestrictionList(props: Props) {
 
     return (
         <>
-            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+            <div className={styles.restrictionListContainer}>
                 <div
                     style={{
                         backgroundColor: '#303030',
                         padding: '10px 20px 0 20px',
                         zIndex: 10,
                         flexShrink: 0,
                         width: '100%',
-                        position: 'sticky',
                         top: 0
                     }}
                 >