From fb0cf4f83307ff7d4da06f6ce0c90d4ef45bdc37 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@meta.com>
Date: Tue, 16 Jan 2024 13:10:32 -0500
Subject: [PATCH] Make collapsed playground tabs more compact

Make collapsed playground tabs more compact

We have a lot of steps creating a lot of tabs by now. This makes them visually a
lot more compact without a full redesign.

Makes it a bit harder to read and less modern looking, but I think usability was
a bit bad with the wide tabs.

**Before:**


![image](https://github.com/facebook/react-forget/assets/11849/a87c8f7e-d60c-43c1-aaea-1a1f77e082d0)

**After:**


![image](https://github.com/facebook/react-forget/assets/11849/227ebf1e-055f-439a-bfc9-e69bae091f6a)
---
 compiler/apps/playground/components/TabbedWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compiler/apps/playground/components/TabbedWindow.tsx b/compiler/apps/playground/components/TabbedWindow.tsx
index 8251f52ed9..5304c2469b 100644
--- a/compiler/apps/playground/components/TabbedWindow.tsx
+++ b/compiler/apps/playground/components/TabbedWindow.tsx
@@ -78,7 +78,7 @@ function TabbedWindowItem({
           {tabs.get(name) ?? <div>No output for {name}</div>}
         </div>
       ) : (
-        <div className="relative items-center h-full px-4 py-8 align-middle border-r border-grey-200">
+        <div className="relative items-center h-full px-1 py-8 align-middle border-r border-grey-200">
           <button
             style={{ transform: "rotate(90deg) translate(-50%)" }}
             onClick={toggleTabs}