Improve resolver selection on small screens 👆

wotschofsky · Dec 23, 2024 · f9205c5 · f9205c5
1 parent 209c8a4
commit f9205c5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/app/lookup/[domain]/(dns)/_components/location-selector.tsx b/app/lookup/[domain]/(dns)/_components/location-selector.tsx
@@ -57,7 +57,7 @@ export const LocationSelector: FC<LocationSelectorProps> = ({
         onValueChange={onValueChange}
         disabled={disabled}
       >
-        <SelectTrigger className="w-[180px]">
+        <SelectTrigger>
           <SelectValue placeholder="Location" />
         </SelectTrigger>
         <SelectContent>

diff --git a/app/lookup/[domain]/(dns)/_components/resolver-selector.tsx b/app/lookup/[domain]/(dns)/_components/resolver-selector.tsx
@@ -53,7 +53,7 @@ export const ResolverSelector: FC<ResolverSelectorProps> = ({
         defaultValue={initialValue || 'authoritative'}
         onValueChange={onValueChange}
       >
-        <SelectTrigger className="w-[180px]">
+        <SelectTrigger>
           <SelectValue placeholder="Resolver" />
         </SelectTrigger>
         <SelectContent>

diff --git a/app/lookup/[domain]/(dns)/page.tsx b/app/lookup/[domain]/(dns)/page.tsx
@@ -70,12 +70,16 @@ const LookupDomain: FC<LookupDomainProps> = async ({
 
   return (
     <>
-      <div className="flex flex-col gap-8 sm:flex-row">
-        <ResolverSelector initialValue={resolverName} />
-        <LocationSelector
-          initialValue={locationName}
-          disabled={!resolverName}
-        />
+      <div className="flex flex-col gap-4 min-[450px]:flex-row">
+        <div className="w-full flex-1 min-[450px]:max-w-52">
+          <ResolverSelector initialValue={resolverName} />
+        </div>
+        <div className="w-full flex-1 min-[450px]:max-w-52">
+          <LocationSelector
+            initialValue={locationName}
+            disabled={!resolverName}
+          />
+        </div>
       </div>
 
       {hasResults ? (