From ae60cc85ce92e458e266ce0446bcfcad194a1471 Mon Sep 17 00:00:00 2001
From: = <albin.groen@demando.se>
Date: Mon, 20 Feb 2023 20:37:00 +0100
Subject: [PATCH] Add small design adjustments

---
 components/Button.tsx      | 2 +-
 components/Models.tsx      | 4 ++--
 components/Sidebar.tsx     | 2 +-
 components/SidebarItem.tsx | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Button.tsx b/components/Button.tsx
index 4ec52dd..5044ebb 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -37,7 +37,7 @@ const Button = (
       disabled={disabled}
       className={classNames(
         "font-medium rounded-md py-2 px-4 w-full text-sm relative disabled:opacity-50",
-        "focus:outline-none focus:ring-1",
+        "focus:outline-none focus-visible:ring-1",
         {
           primary:
             "bg-gray-900 enabled:hover:bg-gray-700 text-white enabled:focus-visible:ring-white enabled:focus-visible:bg-gray-700",
diff --git a/components/Models.tsx b/components/Models.tsx
index d190289..b672770 100644
--- a/components/Models.tsx
+++ b/components/Models.tsx
@@ -336,7 +336,7 @@ export default function Models() {
               <p className="label">Models</p>
 
               {schema.models.length ? (
-                <ul className="w-full space-y-px">
+                <ul className="w-full">
                   {schema.models.map((model, i) => {
                     const isActive = query.id === String(i);
 
@@ -372,7 +372,7 @@ export default function Models() {
               <p className="label">Enums</p>
 
               {schema.enums.length ? (
-                <ul className="w-full space-y-px">
+                <ul className="w-full">
                   {schema.enums.map((schemaEnum, i) => (
                     <li key={schemaEnum.name}>
                       <SidebarItem
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 86772de..8288f38 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -14,7 +14,7 @@ export default function Sidebar({
   extra,
 }: SidebarProps) {
   return (
-    <aside className="flex flex-col w-full max-w-sm h-screen bg-white border-r">
+    <aside className="flex flex-col w-full max-w-xs h-screen bg-white border-r">
       <div className="flex-1 w-full overflow-y-auto">{children}</div>
 
       <Stack direction="vertical" spacing="small" className="w-full p-5">
diff --git a/components/SidebarItem.tsx b/components/SidebarItem.tsx
index 694f8bc..36b3a73 100644
--- a/components/SidebarItem.tsx
+++ b/components/SidebarItem.tsx
@@ -27,7 +27,7 @@ export default function SidebarItem({
       href={href}
       className={classNames(
         "hover:bg-gray-100 px-2 py-1.5 -mx-2 rounded-md flex items-center gap-2.5 group w-full",
-        "focus:outline-none focus-visible:ring-1 focus-visible:ring-black focus:bg-gray-100"
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-black focus-visible:bg-gray-100"
       )}
       onClick={
         onClick