refactor: make example preview look more like a recognizable application window

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"