From 9cc717982288909545fa4c0b1ec791064f661faa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:57:12 +0000
Subject: [PATCH] Simplify workshop tutorial styling

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
---
 .../workshop/WorkshopExperience.astro         | 21 +++-------
 docs/tests/workshop.spec.ts                   | 41 +++++++++++++++++++
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/docs/src/components/workshop/WorkshopExperience.astro b/docs/src/components/workshop/WorkshopExperience.astro
index fd933231b00..06a76e51e9c 100644
--- a/docs/src/components/workshop/WorkshopExperience.astro
+++ b/docs/src/components/workshop/WorkshopExperience.astro
@@ -991,8 +991,7 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 		gap: 0.9rem;
 	}
 
-	.aw-workshop-picker,
-	.aw-workshop-panel-shell {
+	.aw-workshop-picker {
 		border: 1px solid var(--aw-border);
 		background: var(--aw-bg-subtle);
 		border-radius: 1rem;
@@ -1266,10 +1265,10 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 	.aw-workshop-panel-shell {
 		display: flex;
 		flex-direction: column;
+		gap: 1rem;
 		width: 100%;
 		min-width: 0;
 		min-height: calc(100svh - 10rem);
-		padding: 1.25rem;
 	}
 
 	.aw-workshop-panel-heading {
@@ -1287,12 +1286,9 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 
 	.aw-workshop-progress-card {
 		display: grid;
-		gap: 0.85rem;
-		margin-top: 1rem;
-		padding: 1rem;
-		border-radius: 1rem;
-		border: 1px solid var(--aw-border);
-		background: var(--aw-bg-page);
+		gap: 0.75rem;
+		padding-bottom: 1rem;
+		border-bottom: 1px solid color-mix(in srgb, var(--aw-border) 82%, transparent);
 	}
 
 	.aw-workshop-progress-overview {
@@ -1359,11 +1355,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 		display: block;
 		min-width: 0;
 		min-height: 22rem;
-		margin-top: 1rem;
-		padding: clamp(1rem, 2vw, 1.5rem);
-		border-radius: 1rem;
-		border: 1px solid var(--aw-border);
-		background: var(--aw-bg-page);
 	}
 
 	.aw-workshop-step-content :global(h2),
@@ -1608,8 +1599,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ??
 	}
 
 	:root[data-theme='light'] .aw-workshop-card,
-	:root[data-theme='light'] .aw-workshop-progress-card,
-	:root[data-theme='light'] .aw-workshop-step-content,
 	:root[data-theme='light'] .aw-workshop-step-content :global(.aw-workshop-entry-card),
 	:root[data-theme='light'] .aw-workshop-step-markdown,
 	:root[data-theme='light'] .aw-workshop-inline-button,
diff --git a/docs/tests/workshop.spec.ts b/docs/tests/workshop.spec.ts
index ba0564690a4..a32b6664c2f 100644
--- a/docs/tests/workshop.spec.ts
+++ b/docs/tests/workshop.spec.ts
@@ -132,7 +132,11 @@ test.describe('Workshop tutorial', () => {
 			}
 
 			const layout = await page.evaluate(() => {
+				const panelShell = document.querySelector('.aw-workshop-panel-shell');
+				const progressCard = document.querySelector('.aw-workshop-progress-card');
 				const stepContent = document.querySelector('.aw-workshop-step-content');
+				const panelShellStyle = panelShell ? window.getComputedStyle(panelShell) : null;
+				const progressCardStyle = progressCard ? window.getComputedStyle(progressCard) : null;
 				const stepContentStyle = stepContent ? window.getComputedStyle(stepContent) : null;
 				const workshopRoot = document.querySelector('.aw-workshop');
 				const panelHeader = document.querySelector('.aw-workshop-panel-header');
@@ -176,6 +180,21 @@ test.describe('Workshop tutorial', () => {
 						panelHeaderLeft: panelHeaderRect?.left ?? 0,
 						panelFooterLeft: panelFooterRect?.left ?? 0,
 					} : null,
+					panelShellStyle: panelShellStyle ? {
+						borderWidth: panelShellStyle.borderWidth,
+						backgroundColor: panelShellStyle.backgroundColor,
+						boxShadow: panelShellStyle.boxShadow,
+						paddingLeft: panelShellStyle.paddingLeft,
+						paddingRight: panelShellStyle.paddingRight,
+					} : null,
+					progressCardStyle: progressCardStyle ? {
+						borderTopWidth: progressCardStyle.borderTopWidth,
+						borderRightWidth: progressCardStyle.borderRightWidth,
+						borderBottomWidth: progressCardStyle.borderBottomWidth,
+						borderLeftWidth: progressCardStyle.borderLeftWidth,
+						backgroundColor: progressCardStyle.backgroundColor,
+						boxShadow: progressCardStyle.boxShadow,
+					} : null,
 					stepContentStyle: stepContentStyle ? {
 						borderWidth: stepContentStyle.borderWidth,
 						borderRadius: stepContentStyle.borderRadius,
@@ -193,6 +212,28 @@ test.describe('Workshop tutorial', () => {
 				expect(bound.left).toBeGreaterThanOrEqual(-PIXEL_TOLERANCE);
 				expect(bound.right).toBeLessThanOrEqual(layout.viewportWidth + PIXEL_TOLERANCE);
 			}
+			expect(layout.panelShellStyle).toEqual({
+				borderWidth: '0px',
+				backgroundColor: 'rgba(0, 0, 0, 0)',
+				boxShadow: 'none',
+				paddingLeft: '0px',
+				paddingRight: '0px',
+			});
+			expect(layout.progressCardStyle).toEqual({
+				borderTopWidth: '0px',
+				borderRightWidth: '0px',
+				borderBottomWidth: '1px',
+				borderLeftWidth: '0px',
+				backgroundColor: 'rgba(0, 0, 0, 0)',
+				boxShadow: 'none',
+			});
+			expect(layout.stepContentStyle).toMatchObject({
+				borderWidth: '0px',
+				borderRadius: '0px',
+				backgroundImage: 'none',
+				backgroundColor: 'rgba(0, 0, 0, 0)',
+				boxShadow: 'none',
+			});
 			if (isZenMobileViewport) {
 				expect(layout.workshopRootStyle).toEqual({ marginTop: '0px' });
 				const panelShell = layout.bounds.find((bound) => bound.selector === '.aw-workshop-panel-shell');