fix sidebar for settings, logs and blueprint gallery (#1964)

WordPress · Oct 31, 2024 · 60763d8 · 60763d8
1 parent 65c4a92
commit 60763d8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/packages/playground/website/src/components/layout/style.module.css b/packages/playground/website/src/components/layout/style.module.css
@@ -1,16 +1,23 @@
 :root {
 	--site-manager-site-list-width: 320px;
-	--site-manager-site-info-min-width: 350px;
+	--site-manager-site-info-min-width: 555px;
 	--site-manager-width-desktop: calc(
 		var(--site-manager-site-list-width) +
-			var(--site-manager-site-info-min-width)
+		var(--site-manager-site-info-min-width) +
+		2 * var(--site-manager-border-width)
 	);
 	--site-view-min-width: 320px;
 	--site-manager-background-color: #1e1e1e;
 	--site-manager-border-width: 12px;
 	--site-manager-border-radius: 12px;
 }
 
+@media screen and (max-width: 890px) {
+	:root {
+		--site-manager-site-info-min-width: 60%;
+	}
+}
+
 body {
 	background-color: var(--site-manager-background-color);
 }
@@ -27,7 +34,7 @@ body {
 }
 
 .site-manager-wrapper {
-	max-width: 1300px;
+	max-width: var(--site-manager-width-desktop);
 	@media (max-width: 875px) {
 		min-width: 0;
 		width: 100%;
@@ -43,13 +50,13 @@ body {
 .site-manager-wrapper-enter-active {
 	opacity: 1;
 	transform: none;
-	max-width: 1300px;
+	max-width: var(--site-manager-width-desktop);
 	@media (max-width: 875px) {
 		width: 100%;
 	}
 }
 
-/* 
+/*
  * Repeated rule to ensure it's more specific than
  * .site-manager-wrapper-exit
  */
@@ -60,8 +67,8 @@ body {
 
 .site-manager-wrapper-exit-active,
 .site-manager-wrapper-enter-active {
-	transition: 
-		/* 
+	transition:
+		/*
 		 * Workaround: Animate max-width to allow `width: auto`
 		 * The `width` property needs to be `auto` to ensure the
 		 * site manager panel expands and shrinks with its content.
@@ -134,7 +141,7 @@ body {
 
 /*
  * Unfortunately we cannot use calc() in media queries.
- * 
+ *
  * 1166px = --site-manager-width + --site-view-min-width
  *
  * This manual calculation ensures the site view gets hidden

diff --git a/packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx b/packages/playground/website/src/components/site-manager/blueprints-panel/index.tsx
@@ -220,7 +220,7 @@ export function BlueprintsPanel({
 					</FlexItem>
 				) : (
 					<FlexItem
-						style={{ alignSelf: 'stretch', overflowY: 'scroll' }}
+						style={{ alignSelf: 'stretch' }}
 					>
 						<DataViews<BlueprintsIndexEntry>
 							data={indexEntries as BlueprintsIndexEntry[]}

diff --git a/packages/playground/website/src/components/site-manager/blueprints-panel/style.module.css b/packages/playground/website/src/components/site-manager/blueprints-panel/style.module.css
@@ -10,7 +10,7 @@
 	flex-grow: 1;
 
 	&:not(.is-mobile) {
-		width: 500px;
+		width: var(--site-manager-site-info-min-width);
 	}
 
 	/* Hide the Blueprint thumbnail. It doesn't seem possible with the component props. */