From 9f03c11f3cde66c210adc43470d8d6bf6fe17237 Mon Sep 17 00:00:00 2001
From: Jake Hamilton <jake.hamilton@hey.com>
Date: Wed, 23 Oct 2024 10:12:52 -0700
Subject: [PATCH] refactor: make example preview look more like a recognizable
 application window

---
 src/routes/+page.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ce85de1..7c3ec81 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -37,10 +37,12 @@
 			<div class="text-4xl flex justify-center items-center h-full">
 				⇒
 			</div>
-			<div class="float-right drop-shadow flex flex-col rounded">
-				<div class="p-2 pb-4 bg-gradient-to-b from-zinc-100 from-40% to-white w-full flex justify-between">
-					<div><span class="text-zinc-700">http://</span><b>localhost</b>:80</div>
-					<span class="text-blue-700 font-black text-lg select-none -mt-[2px]">⨯</span>
+			<div class="float-right drop-shadow flex flex-col rounded overflow-hidden">
+				<div class="p-2 bg-gradient-to-b from-zinc-100 from-40% to-white w-full flex justify-between grow bg-teal-500">
+					<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
+						<span class="text-zinc-700">http://</span><b>localhost</b>:80
+					</div>
+					<span class="text-zinc-700 font-black text-lg select-none pl-2">⨯</span>
 				</div>
 				<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
 				<enhanced:img src="./demo1/mediawiki.png?format=png"