@samitouri / QOS-React-1 / commits / fb0cf4f833

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)

Jan Kassens committed Jan 16, 2024 at 13:10 UTC fb0cf4f83307ff7d4da06f6ce0c90d4ef45bdc37
1 file changed +1 -1
compiler/apps/playground/components/TabbedWindow.tsx
+1 -1
@@ -78,7 +78,7 @@ function TabbedWindowItem({
78 {tabs.get(name) ?? <div>No output for {name}</div>}
79 </div>
80 ) : (
81 - <div className="relative items-center h-full px-4 py-8 align-middle border-r border-grey-200">
81 + <div className="relative items-center h-full px-1 py-8 align-middle border-r border-grey-200">
82 <button
83 style={{ transform: "rotate(90deg) translate(-50%)" }}
84 onClick={toggleTabs}