From e460fd605c47dee391b0dbaa3797e610f2a97547 Mon Sep 17 00:00:00 2001
From: Stephan Meijer <stephan.meijer@gmail.com>
Date: Thu, 3 Dec 2020 14:40:48 +0100
Subject: [PATCH] fix: correct space between tabs

---
 src/components/Playground.js       |  1 -
 src/components/PlaygroundPanels.js | 13 +++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Playground.js b/src/components/Playground.js
index 1759b352..367c6602 100644
--- a/src/components/Playground.js
+++ b/src/components/Playground.js
@@ -48,7 +48,6 @@ function Playground() {
           </div>
         </div>
 
-        <div className="flex-none h-3" />
         <PlaygroundPanels />
       </div>
     </Layout>
diff --git a/src/components/PlaygroundPanels.js b/src/components/PlaygroundPanels.js
index c3bf9ac5..674322d7 100644
--- a/src/components/PlaygroundPanels.js
+++ b/src/components/PlaygroundPanels.js
@@ -28,19 +28,20 @@ function PlaygroundPanels() {
 
   return (
     <>
-      <div className="px-4 gap-4 flex py-2">
-        {panels.map((panelName) => (
-          <div key={panelName} className="flex items-center">
-            <div className="text-left space-x-2">
+      <div className="px-4 gap-4 flex pt-3 pb-1 h-8">
+        <div className="flex items-center">
+          <div className="text-left space-x-2">
+            {panels.map((panelName) => (
               <TabButton
+                key={panelName}
                 onClick={() => setPanel(panelName)}
                 active={panelName === panel}
               >
                 {panelName}
               </TabButton>
-            </div>
+            ))}
           </div>
-        ))}
+        </div>
       </div>
       <Suspense fallback={null}>
         {panel === panels[0] && (