From 6c8f7b2d8b1eaca7f0cee708f0f1e81d0d59e25e Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Sun, 30 Aug 2026 22:40:03 +0500
Subject: [PATCH] fix: update preview styles

---
 web/src/lib/components/kit/PageGrid.svelte    |  7 ++--
 .../lib/components/kit/PreviewStack.svelte    | 11 ++++-
 web/src/lib/components/kit/PreviewTile.svelte | 42 +++++++++++++------
 web/src/routes/preview/demo/+page.svelte      | 21 ++++++----
 4 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/web/src/lib/components/kit/PageGrid.svelte b/web/src/lib/components/kit/PageGrid.svelte
index c2afa54..13d4831 100644
--- a/web/src/lib/components/kit/PageGrid.svelte
+++ b/web/src/lib/components/kit/PageGrid.svelte
@@ -9,17 +9,18 @@
 	let { settings, preview }: Props = $props();
 </script>
 
-<div class="ws">
+<div class="page-grid">
 	<section class="ws-settings">{@render settings()}</section>
 	{@render preview()}
 </div>
 
 <style>
-	.ws {
+	.page-grid {
 		display: grid;
 		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
 		align-items: start;
 		gap: 56px;
+		width: 100%;
 		max-width: none;
 		margin: auto;
 		padding: 60px clamp(24px, 4vw, 72px) 72px;
@@ -28,7 +29,7 @@
 		min-width: 0;
 	}
 	@media (max-width: 800px) {
-		.ws {
+		.page-grid {
 			grid-template-columns: 1fr;
 			gap: var(--ws-gap-mobile);
 			padding: 36px 16px 48px;
diff --git a/web/src/lib/components/kit/PreviewStack.svelte b/web/src/lib/components/kit/PreviewStack.svelte
index 529aad1..c113287 100644
--- a/web/src/lib/components/kit/PreviewStack.svelte
+++ b/web/src/lib/components/kit/PreviewStack.svelte
@@ -15,8 +15,15 @@
 
 <style>
 	.preview-stack {
-		display: grid;
-		grid-template-columns: 1fr;
+		grid-template-columns: 1fr 1fr;
 		gap: 12px;
+		width: 100%;
+		min-width: 0;
+		display: grid;
+	}
+	@media (max-width: 1100px) {
+		.preview-stack {
+			grid-template-columns: repeat(3, minmax(220px, 1fr));
+		}
 	}
 </style>
diff --git a/web/src/lib/components/kit/PreviewTile.svelte b/web/src/lib/components/kit/PreviewTile.svelte
index e854b99..fe0c3c8 100644
--- a/web/src/lib/components/kit/PreviewTile.svelte
+++ b/web/src/lib/components/kit/PreviewTile.svelte
@@ -20,33 +20,51 @@
 
 <style>
 	.preview-tile {
-		display: flex;
-		flex-direction: column;
-		gap: 0.3rem;
+		width: 100%;
+		min-width: 0;
+		overflow: hidden;
 		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		padding: 0.4rem;
-		background: var(--panel);
+		background: var(--background);
 	}
 	.tile-canvas {
-		border-radius: var(--radius);
+		width: 100%;
+		min-width: 0;
+		min-height: 260px;
+		min-height: clamp(300px, 22vw, 430px);
 		overflow: hidden;
-		min-height: 120px;
+		aspect-ratio: 1.35;
+		background-color: #e4e8eb;
+		background-image:
+			linear-gradient(45deg, #d2d8dc 25%, #0000 25%),
+			linear-gradient(-45deg, #d2d8dc 25%, #0000 25%),
+			linear-gradient(45deg, #0000 75%, #d2d8dc 75%),
+			linear-gradient(-45deg, #0000 75%, #d2d8dc 75%);
+		background-position:
+			0 0,
+			0 7px,
+			7px -7px,
+			-7px 0;
+		background-size: 14px 14px;
+		place-items: center;
+		padding: 16px;
+		display: grid;
 	}
 	.tile-label {
 		display: flex;
-		align-items: baseline;
 		justify-content: space-between;
-		gap: 0.5rem;
+		gap: 8px;
+		padding: 8px;
+		border-top: 1px solid var(--line);
+		font: 9px var(--font-mono);
+		color: var(--blue);
 	}
 	.tile-label span {
 		font: 10px var(--font-mono);
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
 		color: var(--blue);
 	}
 	.tile-label b {
 		font: 400 10px var(--font-mono);
 		color: var(--muted);
+		text-align: right;
 	}
 </style>
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index a8f28de..93d0dec 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -206,7 +206,7 @@
 				{#each previewTiles as tile (tile.label)}
 					<PreviewTile label={tile.label} caption={tile.caption}>
 						<div
-							class="ph"
+							class="image-preview"
 							class:active={tile.active}
 							style="background:{tile.bg}; border-radius:{tile.radius ??
 								'0'}; box-shadow:{tile.ring ?? 'none'};"
@@ -254,10 +254,12 @@
 		font: 11px var(--font-mono);
 	}
 	.preview-panel {
+		min-width: 0;
+		margin-top: 0;
 		border: 1px solid var(--line);
 		background: var(--panel);
+		align-self: start;
 		padding: 18px;
-		min-width: 0;
 		position: sticky;
 		top: 24px;
 	}
@@ -280,18 +282,21 @@
 		color: var(--foreground);
 		background: var(--background);
 	}
-	.ph {
+	.image-preview {
+		min-width: 0;
+		max-width: 100%;
+		overflow: hidden;
+		aspect-ratio: 1.5;
+		color: #16202b;
 		width: 80%;
-		aspect-ratio: 1.35;
-		display: flex;
+		font: 600 10px var(--font-mono);
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		gap: 5px;
-		color: #16202b;
-		font: 600 10px var(--font-mono);
+		display: flex;
 	}
-	.ph.active {
+	.image-preview.active {
 		border-color: var(--blue);
 	}
 	.sample-icon {