expand search field to fit screen width

3ll3d00d · May 27, 2023 · 24a9a9d · 24a9a9d
1 parent edc4e8c
commit 24a9a9d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/ui/src/components/Header.jsx b/ui/src/components/Header.jsx
@@ -141,7 +141,7 @@ const Header = ({
                             variant="rounded"
                             src={beqcIcon}
                             sx={{width: 32, height: 32}}/>
-                    <Box sx={{flexGrow: 1}}/>
+                    <Box sx={{flexGrow: 0.5}}/>
                     {children}
                     <Box sx={{display: {xs: 'none', md: 'flex'}}}>
                         {

diff --git a/ui/src/components/main/Search.jsx b/ui/src/components/main/Search.jsx
@@ -14,7 +14,7 @@ const SearchBar = styled('div')(({theme}) => ({
     },
     marginRight: theme.spacing(2),
     marginLeft: 0,
-    width: '100%',
+    width: 'auto',
     [theme.breakpoints.up('sm')]: {
         marginLeft: theme.spacing(3),
         width: 'auto',
@@ -39,9 +39,18 @@ const StyledInputBase = styled(InputBase)(({theme}) => ({
         paddingLeft: `calc(1em + ${theme.spacing(4)})`,
         transition: theme.transitions.create('width'),
         width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            width: '40ch',
+        },
         [theme.breakpoints.up('md')]: {
-            width: '20ch',
+            width: '60ch',
+        },
+        [theme.breakpoints.up('lg')]: {
+            width: '100ch',
         },
+        [theme.breakpoints.up('xl')]: {
+            width: '140ch',
+        }
     },
 }));
 
@@ -56,7 +65,7 @@ const Search = ({txtFilter, setTxtFilter, showFilters, toggleShowFilters}) => {
                 inputProps={{'aria-label': 'search'}}
                 value={txtFilter}
                 onChange={e => setTxtFilter(e.target.value)}
-                size={'small'}
+                // size={'small'}
                 fullWidth={true}
             />
         </SearchBar>
@@ -70,7 +79,7 @@ const Search = ({txtFilter, setTxtFilter, showFilters, toggleShowFilters}) => {
                                       size={'small'}
                                       color="default"/>
                           }/>
-        <Box sx={{flexGrow: 1}}/>
+        <Box sx={{flexGrow: 0.5}}/>
     </>;
 };
 export default Search;