Select boxes (site + date picker) have better layout on mobile viewport

benvinegar · Jan 19, 2024 · 5fbb7e6 · 5fbb7e6
1 parent 4757944
commit 5fbb7e6
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -131,11 +131,11 @@ export default function Dashboard() {
 
     return (
         <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-            <div className="w-full mb-4 items-stretch flex">
+            <div className="w-full mb-4 flex gap-4">
 
-                <div className="flex-none w-1/6 mr-4">
+                <div className="w-1/2 sm:w-1/3 md:w-1/5">
                     <Select defaultValue={data.siteId} onValueChange={(site) => changeSite(site)}>
-                        <SelectTrigger className="w-full">
+                        <SelectTrigger>
                             <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -147,10 +147,10 @@ export default function Dashboard() {
                     </Select>
                 </div>
 
-                <div className="flex-none w-1/6">
+                <div className="w-1/2 sm:w-1/3 md:w-1/5">
 
                     <Select defaultValue="7" onValueChange={(interval) => changeInterval(interval)}>
-                        <SelectTrigger className="w-[180px]">
+                        <SelectTrigger>
                             <SelectValue />
                         </SelectTrigger>
                         <SelectContent>