Make sort box visible on small screens (#263)

aiidateam · Aug 28, 2023 · 9aaf614 · 9aaf614
1 parent 3c99c84
commit 9aaf614
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/aiida-registry-app/src/App.css b/aiida-registry-app/src/App.css
@@ -460,6 +460,7 @@ padding-right: 5px;
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 99;
   }
 
   .suggestion-item {
@@ -475,6 +476,11 @@ padding-right: 5px;
   .suggestion-item:hover {
     background-color: #f2f2f2;
   }
+  .bar-container {
+    display: flex;
+    flex-direction: row;
+    margin: 0 2%;
+  }
 
 
 @media only screen and (min-width : 150px) and (max-width : 780px)
@@ -520,4 +526,8 @@ padding-right: 5px;
       {
         width: calc(100% - 70px) !important;
       }
+      .bar-container
+      {
+        display: block;
+      }
   }
diff --git a/aiida-registry-app/src/Components/MainIndex.jsx b/aiida-registry-app/src/Components/MainIndex.jsx
@@ -217,13 +217,13 @@ export function MainIndex() {
         <h1>
           Package list
       </h1>
-        <div style={{display:'flex', flexDirection:'row', margin:'0 2%'}}>
+        <div className='bar-container'>
       <div style={{ flex:'1', marginRight:'10px'}}>
         <Search />
         </div>
-          <Box >
+          <Box>
             <FormControl >
-              <InputLabel id="demo-simple-select-label">Sort</InputLabel>
+              <InputLabel>Sort</InputLabel>
               <Select
                 value={sortOption} label = "Sort" onChange={(e) => handleSort(e.target.value)}
               >