From 9aaf6145800c6c34afc96e7437d2479d96eba4f8 Mon Sep 17 00:00:00 2001
From: Ahmed Basem <demhamesab@gmail.com>
Date: Mon, 28 Aug 2023 10:39:12 +0300
Subject: [PATCH] Make sort box visible on small screens (#263)

---
 aiida-registry-app/src/App.css                  | 10 ++++++++++
 aiida-registry-app/src/Components/MainIndex.jsx |  6 +++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/aiida-registry-app/src/App.css b/aiida-registry-app/src/App.css
index 7880b8b7..498823b6 100644
--- 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
index 4e814b87..4b4b1ffa 100644
--- 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)}
               >