From f9205c5ff5d53407469c1c91c966a9b52249cda6 Mon Sep 17 00:00:00 2001
From: Felix Wotschofsky <felix@wotschofsky.com>
Date: Mon, 23 Dec 2024 14:47:31 +0100
Subject: [PATCH] =?UTF-8?q?Improve=20resolver=20selection=20on=20small=20s?=
 =?UTF-8?q?creens=20=F0=9F=91=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(dns)/_components/location-selector.tsx      |  2 +-
 .../(dns)/_components/resolver-selector.tsx      |  2 +-
 app/lookup/[domain]/(dns)/page.tsx               | 16 ++++++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/lookup/[domain]/(dns)/_components/location-selector.tsx b/app/lookup/[domain]/(dns)/_components/location-selector.tsx
index 65d09c5..e410828 100644
--- 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
index 94ced04..ac252d1 100644
--- 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
index e081ad0..5c88a4e 100644
--- 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 ? (