style: responsive changes

laurelin60 · Jan 16, 2024 · e512d3a · e512d3a
1 parent 8e0d62b
commit e512d3a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/components/search/Search.tsx b/components/search/Search.tsx
@@ -265,7 +265,7 @@ const Search = () => {
                         </span>
                     </div>
                     <div className="mt-8 flex flex-row items-center justify-between">
-                        <div className="flex flex-col flex-wrap gap-x-4 gap-y-2 md:flex-row">
+                        <div className="flex w-full flex-row flex-wrap gap-x-4 gap-y-2">
                             <SearchSelect
                                 value={university}
                                 data={Object.keys(UNIVERSITY_GE)}

diff --git a/components/search/SearchSelect.tsx b/components/search/SearchSelect.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { ChangeEvent, useState } from "react";
 import {
     Select,
     SelectContent,
@@ -20,27 +19,21 @@ export const SearchSelect = (props: DropdownComponentProps) => {
     const { value, data, onChange, placeholder } = props;
 
     return (
-        <div className="flex place-content-center">
-            <div className="relative flex h-12 w-[100%] sm:w-[340px] md:h-16 xl:h-16">
-                <Select value={value} onValueChange={onChange}>
-                    <SelectTrigger className="h-full w-full overflow-ellipsis rounded-xl border-2 border-gray px-4 text-base md:text-2xl">
-                        <SelectValue placeholder={placeholder} />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {data.map((item) => (
-                            <SelectItem
-                                value={item}
-                                key={item}
-                                className="text-lg"
-                            >
-                                {item.includes("University of California")
-                                    ? "UC " + item.split(", ")[1]
-                                    : item}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-            </div>
+        <div className="relative flex h-12 w-[300px] md:h-16">
+            <Select value={value} onValueChange={onChange}>
+                <SelectTrigger className="h-full w-full overflow-ellipsis rounded-xl border-2 border-gray px-4 text-base md:text-2xl">
+                    <SelectValue placeholder={placeholder} />
+                </SelectTrigger>
+                <SelectContent>
+                    {data.map((item) => (
+                        <SelectItem value={item} key={item} className="text-lg">
+                            {item.includes("University of California")
+                                ? "UC " + item.split(", ")[1]
+                                : item}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
         </div>
     );
 };