From 74a1cb61c16d6cdc81466eae435cb2e27002bbd3 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 20 Mar 2023 17:01:29 -0700
Subject: [PATCH] Fix URL bar spacing

---
 src-web/components/RequestMethodDropdown.tsx | 4 +++-
 src-web/components/UrlBar.tsx                | 6 ++++--
 src-web/components/core/Input.tsx            | 5 +++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src-web/components/RequestMethodDropdown.tsx b/src-web/components/RequestMethodDropdown.tsx
index 2c635b61..91aab2e2 100644
--- a/src-web/components/RequestMethodDropdown.tsx
+++ b/src-web/components/RequestMethodDropdown.tsx
@@ -4,6 +4,7 @@ import { RadioDropdown } from './core/RadioDropdown';
 
 type Props = {
   method: string;
+  className?: string;
   onChange: (method: string) => void;
 };
 
@@ -15,10 +16,11 @@ const methodItems = ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD']
 export const RequestMethodDropdown = memo(function RequestMethodDropdown({
   method,
   onChange,
+  className,
 }: Props) {
   return (
     <RadioDropdown value={method} items={methodItems} onChange={onChange}>
-      <Button type="button" size="sm" className="mx-0.5" justify="start">
+      <Button size="sm" className={className}>
         {method.toUpperCase()}
       </Button>
     </RadioDropdown>
diff --git a/src-web/components/UrlBar.tsx b/src-web/components/UrlBar.tsx
index efebe79f..06d32394 100644
--- a/src-web/components/UrlBar.tsx
+++ b/src-web/components/UrlBar.tsx
@@ -29,7 +29,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
   );
 
   return (
-    <form onSubmit={handleSubmit} className={className}>
+    <form onSubmit={handleSubmit} className={classnames('url-bar', className)}>
       <Input
         key={requestId}
         hideLabel
@@ -42,7 +42,9 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
         onChange={handleUrlChange}
         defaultValue={url}
         placeholder="Enter a URL..."
-        leftSlot={<RequestMethodDropdown method={method} onChange={handleMethodChange} />}
+        leftSlot={
+          <RequestMethodDropdown method={method} onChange={handleMethodChange} className="mx-0.5" />
+        }
         rightSlot={
           <IconButton
             title="Send Request"
diff --git a/src-web/components/core/Input.tsx b/src-web/components/core/Input.tsx
index 0515f428..9012ab3b 100644
--- a/src-web/components/core/Input.tsx
+++ b/src-web/components/core/Input.tsx
@@ -47,8 +47,9 @@ export function Input({
   const inputClassName = classnames(
     className,
     '!bg-transparent min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
-    !!leftSlot && '!pl-0.5',
-    !!rightSlot && '!pr-0.5',
+    // Bump things over if the slots are occupied
+    leftSlot && 'pl-0.5 -ml-2',
+    rightSlot && 'pr-0.5 -mr-2',
   );
 
   const isValid = useMemo(() => {