From 33181051021690cb1b10ff879583365c858c5b9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Thu, 23 Oct 2025 14:12:00 +0200
Subject: [PATCH 1/2] [Website] Move the sidebar icon to the right

---
 packages/playground/components/src/icons.tsx  |  2 +-
 .../src/components/browser-chrome/index.tsx   | 24 ++++++++-----------
 .../browser-chrome/style.module.css           |  6 +----
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/playground/components/src/icons.tsx b/packages/playground/components/src/icons.tsx
index 3117abc1fc..379c01da65 100644
--- a/packages/playground/components/src/icons.tsx
+++ b/packages/playground/components/src/icons.tsx
@@ -168,7 +168,7 @@ export function SiteManagerIcon({
 				<rect
 					x="3"
 					y="3"
-					width="6"
+					width="7"
 					height="18"
 					rx="2"
 					ry="2"
diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
index 33c3ccd39a..df7b3514ab 100644
--- a/packages/playground/website/src/components/browser-chrome/index.tsx
+++ b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -57,7 +57,16 @@ export default function BrowserChrome({
 					})}
 					aria-label="Playground toolbar"
 				>
-					<div className={css.windowControls}>
+					<div className={addressBarClass}>
+						<AddressBar
+							url={url}
+							onUpdate={(newUrl) =>
+								clientInfo?.client.goTo(newUrl)
+							}
+						/>
+					</div>
+
+					<div className={css.toolbarButtons}>
 						<Button
 							variant="browser-chrome"
 							aria-label={
@@ -80,18 +89,7 @@ export default function BrowserChrome({
 								sidebarActive={siteManagerIsOpen}
 							/>
 						</Button>
-					</div>
 
-					<div className={addressBarClass}>
-						<AddressBar
-							url={url}
-							onUpdate={(newUrl) =>
-								clientInfo?.client.goTo(newUrl)
-							}
-						/>
-					</div>
-
-					<div className={css.toolbarButtons}>
 						{isMobileUi ? (
 							<>
 								<Button
@@ -100,7 +98,6 @@ export default function BrowserChrome({
 									onClick={onToggle}
 									aria-expanded={isModalOpen}
 									style={{
-										padding: '0 10px',
 										fill: '#FFF',
 										alignItems: 'center',
 										display: 'flex',
@@ -132,7 +129,6 @@ export default function BrowserChrome({
 										onClick={onToggle}
 										aria-expanded={isOpen}
 										style={{
-											padding: '0 10px',
 											fill: '#FFF',
 											alignItems: 'center',
 											display: 'flex',
diff --git a/packages/playground/website/src/components/browser-chrome/style.module.css b/packages/playground/website/src/components/browser-chrome/style.module.css
index cc850a6932..ac84a67f58 100644
--- a/packages/playground/website/src/components/browser-chrome/style.module.css
+++ b/packages/playground/website/src/components/browser-chrome/style.module.css
@@ -59,17 +59,13 @@ body.is-embedded .fake-window-wrapper {
 	padding: 0 4px;
 }
 
-.window-controls {
-	display: flex;
-}
-
 .toolbar-buttons:empty {
 	display: none;
 }
 
 .toolbar-buttons {
 	display: flex;
-	gap: 10px;
+	gap: 0;
 	color: #fff;
 }
 

From a92b127d09debaac21d975ee00db09aa8b711a58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Thu, 23 Oct 2025 14:13:42 +0200
Subject: [PATCH 2/2] Align icons to the center

---
 .../playground/website/src/components/button/style.module.css    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/playground/website/src/components/button/style.module.css b/packages/playground/website/src/components/button/style.module.css
index c360c169bf..6d642b542a 100644
--- a/packages/playground/website/src/components/button/style.module.css
+++ b/packages/playground/website/src/components/button/style.module.css
@@ -23,6 +23,7 @@
 .button.button.button.is-browser-chrome {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	min-height: 40px;
 	min-width: 40px;
 	background: transparent;