From 31daca2b7218868311137b7f841fd55a36701a87 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 21 Oct 2024 12:42:00 +0200
Subject: [PATCH] Style Book: clean up layout (#66255)

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
---
 .../src/components/style-book/index.js        | 65 +++++++++----------
 .../src/components/style-book/style.scss      | 26 ++++----
 2 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 7b85c320e20c99..42b6e3f4fc99b6 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -120,39 +120,38 @@ function StyleBook( {
 			>
 				{ resizeObserver }
 				{ showTabs ? (
-					<div className="edit-site-style-book__tabs">
-						<Tabs>
-							<div className="edit-site-style-book__tablist-container">
-								<Tabs.TabList>
-									{ tabs.map( ( tab ) => (
-										<Tabs.Tab
-											tabId={ tab.slug }
-											key={ tab.slug }
-										>
-											{ tab.title }
-										</Tabs.Tab>
-									) ) }
-								</Tabs.TabList>
-							</div>
-							{ tabs.map( ( tab ) => (
-								<Tabs.TabPanel
-									key={ tab.slug }
-									tabId={ tab.slug }
-									focusable={ false }
-								>
-									<StyleBookBody
-										category={ tab.slug }
-										examples={ examples }
-										isSelected={ isSelected }
-										onSelect={ onSelect }
-										settings={ settings }
-										sizes={ sizes }
-										title={ tab.title }
-									/>
-								</Tabs.TabPanel>
-							) ) }
-						</Tabs>
-					</div>
+					<Tabs>
+						<div className="edit-site-style-book__tablist-container">
+							<Tabs.TabList>
+								{ tabs.map( ( tab ) => (
+									<Tabs.Tab
+										tabId={ tab.slug }
+										key={ tab.slug }
+									>
+										{ tab.title }
+									</Tabs.Tab>
+								) ) }
+							</Tabs.TabList>
+						</div>
+						{ tabs.map( ( tab ) => (
+							<Tabs.TabPanel
+								key={ tab.slug }
+								tabId={ tab.slug }
+								focusable={ false }
+								className="edit-site-style-book__tabpanel"
+							>
+								<StyleBookBody
+									category={ tab.slug }
+									examples={ examples }
+									isSelected={ isSelected }
+									onSelect={ onSelect }
+									settings={ settings }
+									sizes={ sizes }
+									title={ tab.title }
+								/>
+							</Tabs.TabPanel>
+						) ) }
+					</Tabs>
 				) : (
 					<StyleBookBody
 						examples={ examples }
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 3e0c6466438a22..773b4f10f581bb 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -5,6 +5,10 @@
 	&.is-button {
 		border-radius: $radius-large;
 	}
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }
 
 .edit-site-style-book__iframe {
@@ -18,22 +22,16 @@
 }
 
 .edit-site-style-book__tablist-container {
-	background: $white;
+	flex: none;
+
+	display: flex;
 	width: 100%;
 	padding-right: 56px;
-	display: flex;
-	position: absolute;
-	z-index: 1;
+	background: $white;
 }
 
-.edit-site-style-book__tabs {
-	[role="tabpanel"] {
-		bottom: 0;
-		left: 0;
-		overflow: auto;
-		padding: 0;
-		position: absolute;
-		right: 0;
-		top: $grid-unit-60; // Height of tabs.
-	}
+.edit-site-style-book__tabpanel {
+	flex: 1 0 auto;
+
+	overflow: auto;
 }