Website fixes for mobile (#8857)

* better header for mobile * add changeset * nicer border * style header * better search overlay * responsive changes * more mobile responsiveness * docs and guides mobile responsive * formatting * fix get started button * fix header * test without lite * formatting * secondary menu docs * fix type overflow in paramtable * playground header * playground on mobile * small changes * formatting * formatting --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
2025-04-06 12:30:29 +08:00 · 2024-08-05 21:20:24 -07:00 · 2024-08-05 21:20:24 -07:00 · 6584aace98
commit 6584aace98
parent df54b9c6fa
18 changed files with 836 additions and 210 deletions
--- a/.changeset/pretty-boats-melt.md
+++ b/.changeset/pretty-boats-melt.md
@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Website fixes for mobile 
--- a/js/_website/src/app.html
+++ b/js/_website/src/app.html
@ -7,10 +7,7 @@
 		%sveltekit.head%
 	</head>

-	<body
-		data-sveltekit-preload-data="hover"
-		style="min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto"
-	>
+	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/js/_website/src/lib/assets/style.css
+++ b/js/_website/src/lib/assets/style.css
@ -17,6 +17,14 @@
 	margin-bottom: 0;
 }

+.prose :where(code):not(:where([class~="not-prose"] *)) {
+	word-break: break-all;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+	word-break: break-all;
+}
+
 .group:hover .group-hover\:flex {
 	/* for some reason, group-hover:flex not working on mobile */
 	display: flex;
@ -145,7 +153,7 @@
 .selected-demo {
 	@apply font-semibold bg-gray-50 rounded text-orange-500;
 }
-code.language-python {
+.codeblock code.language-python {
 	@apply !leading-7 !whitespace-pre-wrap !break-all;
 	line-height: 1 !important;
 }
@ -169,6 +177,10 @@ code.language-bash {
 	content: "• ";
 }

+.obj p {
+	word-break: break-word;
+}
+
 /* copy button */
 .clipboard-button {
 	@apply absolute right-0 px-1.5 pb-1 text-gray-500 text-sm z-[100] opacity-0 duration-100;
@ -316,4 +328,37 @@ strong {

 .obj .codeblock {
 	@apply my-4;
+	display: grid;
+}
+
+.prose .codeblock {
+	@apply my-4;
+	display: grid;
+}
+
+.prose li {
+	display: inline-block;
+}
+
+summary {
+	display: grid !important;
+}
+
+summary code {
+	white-space: nowrap !important;
+	overflow-x: scroll;
+}
+
+summary::after {
+	@apply pl-1 !opacity-100;
+	background: #f9fafb;
+	height: 90%;
+	padding-top: 14px;
+}
+
+@media (min-width: 768px) {
+	body:has(.playground) .main-header,
+	body:has(.playground) .main-footer {
+		display: none;
+	}
 }
--- a/js/_website/src/lib/components/Demos.svelte
+++ b/js/_website/src/lib/components/Demos.svelte
@ -3,6 +3,7 @@
 	export let code: string;
 	export let highlighted_code: string;
 	export let url_version: string;
+
 	$: url_version;
 </script>

@ -13,10 +14,10 @@
 	/>
 </svelte:head>

-<div class="py-2 max-h-[750px] overflow-y-scroll">
+<div class="hidden lg:block py-2 max-h-[750px] overflow-y-scroll">
 	{#key name}
 		<button
-			class="open-btn bg-gray-200 text-gray-500 font-bold px-2 rounded mx-4 my-2"
+			class="hidden lg:block open-btn bg-gray-200 text-gray-500 font-bold px-2 rounded mx-4 my-2"
 			on:click={() => {
 				let code_b64 = btoa(code);
 				window.open("/playground?demo=Blank&code=" + code_b64, "_blank");
@ -31,6 +32,22 @@
 	{/key}
 </div>

+<div class="lg:hidden">
+	<div class="codeblock" id="{name}_code">
+		<pre class=" max-h-80 overflow-auto"><code class="code language-python"
+				>{@html highlighted_code}</code
+			>
+		</pre>
+	</div>
+	{#key name}
+		{#if url_version === "main"}
+			<gradio-app space={"gradio/" + name + "_main"} />
+		{:else}
+			<gradio-app space={"gradio/" + name} />
+		{/if}
+	{/key}
+</div>
+
 <style>
 	.open-btn {
 		position: absolute;
@ -40,4 +57,13 @@
 		color: #374151;
 		font-weight: 500;
 	}
+	:global(.child-container) {
+		flex-direction: column !important;
+	}
+	:global(.code-editor) {
+		border-bottom: 1px solid rgb(229 231 235);
+		height: 300px;
+		overflow-y: scroll;
+		flex: none !important;
+	}
 </style>
--- a/js/_website/src/lib/components/DemosSection.svelte
+++ b/js/_website/src/lib/components/DemosSection.svelte
@ -5,8 +5,8 @@
 	let url_version = "4+";
 </script>

-<div>
-	<div class="demo-window overflow-y-auto h-full w-full mb-4">
+<div class="grid">
+	<div class="demo-window overflow-y-auto h-fit w-full mb-4">
 		<div
 			class="relative mx-auto my-auto rounded-md bg-white"
 			style="top: 5%; height: 90%"
--- a/js/_website/src/lib/components/DocsNav.svelte
+++ b/js/_website/src/lib/components/DocsNav.svelte
@ -5,44 +5,28 @@
 	export let library_pages: any;
 	export let current_nav_link = "";
 	export let show_dropdown = true;
+	export let show_nav = false;

-	let show_nav = false;
 	import DropDown from "$lib/components/VersionDropdown.svelte";
 </script>

-<section
-	class="top-0 left-0 fixed flex items-center p-4 rounded-br-lg backdrop-blur-lg z-50 bg-gray-200/50 lg:hidden"
-	id="menu-bar"
->
-	<button
-		on:click={() => (show_nav = !show_nav)}
-		type="button"
-		class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
-	>
-		<svg width="24" height="24"
-			><path
-				d="M5 6h14M5 12h14M5 18h14"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-			/></svg
-		>
-	</button>
-</section>
-
+<div
+	class:hidden={!show_nav}
+	class="fixed inset-0 bg-black/20 backdrop-blur-md lg:hidden z-50"
+></div>
 <div
 	use:clickOutside
 	on:click_outside={() => (show_nav = false)}
 	class:hidden={!show_nav}
-	class="max-w-max md:min-w-[200px] navigation mobile-nav overflow-y-auto fixed backdrop-blur-lg z-50 bg-gray-200/50 pr-6 pl-4 py-4 -ml-4 h-full inset-0 lg:inset-auto lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12"
+	class="max-w-max min-w-[75%] navigation mobile-nav shadow overflow-y-auto fixed backdrop-blur-lg z-50 bg-white pr-6 pl-4 py-4 -ml-4 h-full inset-0 lg:inset-auto lg:shadow-none lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block lg:rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12 lg:min-w-0"
 	id="mobile-nav"
 >
 	<button
-		on:click={() => (show_nav = !show_nav)}
+		on:click={() => (show_nav = false)}
 		type="button"
 		class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden"
 		tabindex="0"
+		data-svelte-h="svelte-1askwj0"
 	>
 		<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"
 			><path
@ -51,7 +35,7 @@
 				stroke="currentColor"
 				stroke-width="2"
 				stroke-linecap="round"
-			/></svg
+			></path></svg
 		>
 	</button>

--- a/js/_website/src/lib/components/Header.svelte
+++ b/js/_website/src/lib/components/Header.svelte
@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onNavigate } from "$app/navigation";
 	import { store } from "../../routes/+layout.svelte";

 	import { gradio_logo } from "../assets";
@ -8,10 +9,15 @@
 	let show_help_menu = false;
 	let show_nav = false;
 	$: show_nav = click_nav || $store?.lg;
+
+	onNavigate(() => {
+		click_nav = false;
+		show_help_menu = false;
+	});
 </script>

 <!-- 4.0 Launch BANNER  -->
-<div class="main-header flex-row">
+<div class="main-header flex-row mb-4">
 	<div
 		class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1 mx-auto"
 	>
@ -31,24 +37,41 @@
 		<div class="hidden justify-end flex-grow sm:flex"></div>
 	</div>
 	<div
-		class="container mx-auto flex flex-wrap justify-between flex-row relative items-center px-4 py-5 gap-6 text-lg z-50"
+		class:border={show_nav}
+		class:shadow={show_nav}
+		class="w-[95%] mx-auto border-gray-200 rounded-lg p-2 mt-2 flex flex-wrap justify-between flex-row relative items-center text-lg z-40 lg:px-4 lg:py-5 lg:gap-6 lg:container lg:border-none lg:shadow-none"
 	>
 		<a href="/">
 			<img src={gradio_logo} alt="Gradio logo" />
 		</a>
-		<svg
-			class="h-8 w-8 lg:hidden"
-			viewBox="-10 -10 20 20"
-			on:click={() => (click_nav = !click_nav)}
-		>
-			<rect x="-7" y="-6" width="14" height="2" />
-			<rect x="-7" y="-1" width="14" height="2" />
-			<rect x="-7" y="4" width="14" height="2" />
-		</svg>
-
+		{#if !show_nav}
+			<svg
+				class="h-8 w-8 lg:hidden"
+				viewBox="-10 -10 20 20"
+				on:click={() => (click_nav = !click_nav)}
+			>
+				<rect x="-7" y="-6" width="14" height="2" />
+				<rect x="-7" y="-1" width="14" height="2" />
+				<rect x="-7" y="4" width="14" height="2" />
+			</svg>
+		{:else}
+			<svg
+				class="h-5 w-5 lg:hidden mr-2"
+				viewBox="-10 -10 70 70"
+				width="50"
+				height="50"
+				stroke="black"
+				stroke-width="10"
+				stroke-linecap="round"
+				on:click={() => (click_nav = !click_nav)}
+			>
+				<line x1="0" y1="0" x2="50" y2="50" />
+				<line x1="50" y1="0" x2="0" y2="50" />
+			</svg>
+		{/if}
 		<nav
 			class:hidden={!show_nav}
-			class="w-full flex-col gap-3 lg:flex lg:w-auto lg:flex-row lg:gap-8"
+			class="flex w-full flex-col gap-3 px-4 py-2 lg:flex lg:w-auto lg:flex-row lg:gap-8"
 		>
 			<a class="thin-link flex items-center gap-3" href="/guides/quickstart"
 				><span>⚡</span> <span>Quickstart</span>
@ -64,48 +87,64 @@
 				class="thin-link flex items-center gap-3"
 				href="/custom-components/gallery"
 				><span>🖼️</span>
-				<span>Custom Components<sup class="text-orange-500">NEW</sup></span></a
+				<span>Custom Components</span></a
 			>
 			<div
-				on:mouseenter={() => (show_help_menu = true)}
-				on:mouseleave={() => (show_help_menu = false)}
-				class="group relative flex cursor-pointer items-center gap-3"
+				on:click={() => (show_help_menu = !show_help_menu)}
+				class="flex flex-col gap-3 lg:group lg:relative lg:flex lg:cursor-pointer lg:items-center lg:gap-3"
 			>
-				<span>🖐</span> <span>Community</span>
-				<svg
-					class="h-4 w-4"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-				>
-					<path
-						d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
-					/>
-				</svg>
+				<div class="flex items-center gap-3">
+					<span>🖐</span> <span>Community</span>
+					{#if show_help_menu}
+						<svg
+							class="h-4 w-4"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+						>
+							<path
+								d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+								transform="scale (1, -1)"
+								transform-origin="center"
+							/>
+						</svg>
+					{:else}
+						<svg
+							class="h-4 w-4"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+						>
+							<path
+								d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+							/>
+						</svg>
+					{/if}
+				</div>
 				{#if show_help_menu}
 					<div
-						class="help-menu absolute top-6 w-52 flex-col bg-white shadow group-hover:flex sm:right-0"
+						class="help-menu flex flex-col gap-3 lg:absolute lg:top-7 lg:w-52 lg:bg-white lg:shadow lg:group-hover:flex lg:sm:right-0 lg:gap-0"
 					>
 						<a
-							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
+							class="thin-link inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2 lg:hover:bg-gray-100"
 							href="https://github.com/gradio-app/gradio/issues/new/choose"
 							target="_blank">File an Issue</a
 						>
 						<a
-							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
+							class="thin-link inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2 lg:hover:bg-gray-100"
 							target="_blank"
 							href="https://discord.gg/feTf9x3ZSB">Discord</a
 						>
 						<a
-							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
+							class="thin-link inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2 lg:hover:bg-gray-100"
 							target="_blank"
 							href="https://gradio.curated.co/">Newsletter</a
 						>
 						<a
-							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
+							class="thin-link inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2 lg:hover:bg-gray-100"
 							href="/brand">Brand</a
 						>
 						<a
-							class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
+							class="thin-link inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2 lg:hover:bg-gray-100"
+							target="_blank"
 							href="https://github.com/gradio-app/gradio"
 						>
 							Github
@ -113,8 +152,9 @@
 					</div>
 				{/if}
 			</div>
-
-			<Search />
+			<div>
+				<Search />
+			</div>
 		</nav>
 	</div>
 </div>
--- a/js/_website/src/lib/components/search/search.svelte
+++ b/js/_website/src/lib/components/search/search.svelte
@ -278,7 +278,7 @@
 	}

 	.content {
-		@apply fixed left-1/2 top-1/4 -translate-x-1/2 mx-auto w-screen max-w-3xl flex flex-col min-h-0 rounded-lg shadow-2xl bg-white z-40;
+		@apply fixed left-1/2 top-[7%] -translate-x-1/2 mx-auto w-[95vw] max-w-3xl flex flex-col min-h-0 rounded-lg shadow-2xl bg-white z-40;
 	}

 	.results {
--- a/js/_website/src/routes/+layout.svelte
+++ b/js/_website/src/routes/+layout.svelte
@ -28,25 +28,27 @@
 	import { afterNavigate } from "$app/navigation";

 	afterNavigate(() => {
-		for (const node of document.querySelectorAll(".codeblock")) {
-			let children = Array.from(node.querySelectorAll("pre, a"));
-			let textContent = node.textContent;
-			node.innerHTML = "";
+		if (window.innerWidth > 768) {
+			for (const node of document.querySelectorAll(".codeblock")) {
+				let children = Array.from(node.querySelectorAll("pre, a"));
+				let textContent = node.textContent;
+				node.innerHTML = "";

-			new CopyButton({
-				target: node,
-				props: {
-					content: textContent ?? ""
+				new CopyButton({
+					target: node,
+					props: {
+						content: textContent ?? ""
+					}
+				});
+				for (const child of children) {
+					node.appendChild(child);
 				}
-			});
-			for (const child of children) {
-				node.appendChild(child);
 			}
+			const script = document.createElement("script");
+			script.src = "https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js";
+			script.type = "module";
+			document.head.appendChild(script);
 		}
-		const script = document.createElement("script");
-		script.src = "https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js";
-		script.type = "module";
-		document.head.appendChild(script);
 	});
 </script>

@ -77,12 +79,3 @@
 <slot />

 <Footer />
-
-<style>
-	:global(
-			body:has(.playground) .main-header,
-			body:has(.playground) .main-footer
-		) {
-		display: none;
-	}
-</style>
--- a/js/_website/src/routes/+page.svelte
+++ b/js/_website/src/routes/+page.svelte
@ -53,9 +53,11 @@
 					Gradio is the fastest way to demo your machine learning model with a
 					friendly web interface so that anyone can use it, anywhere!
 				</p>
-				<div class="flex space-x-4 justify-center lg:justify-start">
+				<div
+					class="flex flex-col md:flex-row space-x-4 justify-center lg:justify-start"
+				>
 					<a
-						class="rounded-full bg-gradient-to-br from-orange-500 via-orange-500 to-yellow-500 px-6 py-3 text-lg font-semibold text-white hover:to-yellow-400 hover:drop-shadow-md md:text-xl"
+						class="mx-auto w-fit mb-5 md:m-0 rounded-full bg-gradient-to-br from-orange-500 via-orange-500 to-yellow-500 px-6 py-3 text-lg font-semibold text-white hover:to-yellow-400 hover:drop-shadow-md md:text-xl"
 						href="/guides/quickstart">Get Started</a
 					>
 					<div class="flex items-center justify-center">
--- a/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
@ -3,6 +3,7 @@
 	import MetaTags from "$lib/components/MetaTags.svelte";
 	import { onDestroy } from "svelte";
 	import { page } from "$app/stores";
+	import { onNavigate } from "$app/navigation";

 	export let data: any = {};

@ -83,6 +84,30 @@
 		all_headers = get_headers();
 	}

+	let show_nav = false;
+
+	onNavigate(() => {
+		show_nav = false;
+	});
+
+	$: show_nav;
+
+	function get_category(name: string) {
+		if (pages) {
+			for (let category of pages) {
+				for (let page of category.pages) {
+					if (page.name === name) {
+						return [category.category, page.pretty_name];
+					}
+				}
+			}
+		}
+	}
+
+
+	let category_and_name: any[] | undefined = get_category(name);
+
+	$: category_and_name = get_category(name);

 </script>

@ -96,11 +121,30 @@

 <svelte:window bind:scrollY={y} />

-<main class="container mx-auto px-4 flex gap-4">
+<main class="container mx-auto px-4 flex flex-col gap-4">
+	<div class="flex items-center p-4 border-b border-t border-slate-900/10 lg:hidden dark:border-slate-50/[0.06]">
+		<button 
+		on:click={() => (show_nav = !show_nav)}
+		type="button" class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300">
+			<svg width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
+		</button>
+		{#if category_and_name}
+		<ol class="ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0">
+			<li class="flex items-center">{category_and_name[0]}
+				<svg width="3" height="6" aria-hidden="true" class="mx-3 overflow-visible text-slate-400"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>
+			</li>
+			<li class="font-semibold text-slate-900 truncate dark:text-slate-200">
+				{category_and_name[1]}
+			</li>
+		</ol>
+		{/if}
+	</div>
+
 	<div class="flex w-full">
 		<DocsNav
 			current_nav_link={name}
 			library_pages={pages}
+			bind:show_nav={show_nav}
 		/>

 		<div class="flex flex-col w-full min-w-full lg:w-8/12 lg:min-w-0">
@ -137,35 +181,36 @@
 					</p>
 				</div>
 			{/if}
+				

-			<div class="flex justify-between mt-4 lg:ml-10">
-				{#if prev_obj}
-					<a
-						href="./{prev_obj.name}"
-						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
-					>
-						<div class="text-lg">
-							<span class="text-orange-500">&#8592;</span>
-							{prev_obj.pretty_name}
-						</div>
-					</a>
-				{:else}
-					<div />
-				{/if}
-				{#if next_obj}
-					<a
-						href="./{next_obj.name}"
-						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
-					>
-						<div class="text-lg">
-							{next_obj.pretty_name}
-							<span class="text-orange-500">&#8594;</span>
-						</div>
-					</a>
-				{:else}
-					<div />
-				{/if}
-			</div>
+			<div class="w-full flex flex-wrap justify-between my-4">
+					{#if prev_obj}
+						<a
+							href="./{prev_obj.name}"
+							class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+						>
+							<div class="flex text-lg">
+								<span class="text-orange-500 mr-1">&#8592;</span>
+								<p class="whitespace-nowrap overflow-hidden text-ellipsis">{prev_obj.pretty_name}</p>
+							</div>
+						</a>
+					{:else}
+						<div />
+					{/if}
+					{#if next_obj}
+						<a
+							href="./{next_obj.name}"
+							class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+						>
+							<div class="flex text-lg">
+								<p class="whitespace-nowrap overflow-hidden text-ellipsis">{next_obj.pretty_name}</p>
+								<span class="text-orange-500 ml-1">&#8594;</span>
+							</div>
+						</a>
+					{:else}
+						<div />
+					{/if}
+				</div>

 				<div class="flex flex-row">
 					<div class="lg:ml-10 w-full">
@ -175,16 +220,15 @@
 					</div>
 				</div>

-
-				<div class="flex justify-between mt-4 lg:ml-10">
+				<div class="w-full flex flex-wrap justify-between my-4">
 					{#if prev_obj}
 						<a
 							href="./{prev_obj.name}"
-							class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
+							class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 						>
-							<div class="text-lg">
-								<span class="text-orange-500">&#8592;</span>
-								{prev_obj.pretty_name}
+							<div class="flex text-lg">
+								<span class="text-orange-500 mr-1">&#8592;</span>
+								<p class="whitespace-nowrap overflow-hidden text-ellipsis">{prev_obj.pretty_name}</p>
 							</div>
 						</a>
 					{:else}
@ -193,11 +237,11 @@
 					{#if next_obj}
 						<a
 							href="./{next_obj.name}"
-							class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
+							class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 						>
-							<div class="text-lg">
-								{next_obj.pretty_name}
-								<span class="text-orange-500">&#8594;</span>
+							<div class="flex text-lg">
+								<p class="whitespace-nowrap overflow-hidden text-ellipsis">{next_obj.pretty_name}</p>
+								<span class="text-orange-500 ml-1">&#8594;</span>
 							</div>
 						</a>
 					{:else}
--- a/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
@ -71,7 +71,7 @@

 			<div class="lg:ml-10 flex justify-between mt-4"></div>
 			<div class="flex flex-row">
-				<div class=" lg:ml-10 lg:mr-24">
+				<div class="w-full lg:ml-10 lg:mr-24">
 					<div class="prose text-lg max-w-full">
 						{@html readme_html}
 					</div>
--- a/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/js/[jsdoc]/+page.svelte
@ -10,8 +10,20 @@
 	let js_pages = data.js_pages;

 	let js_components = js_pages.filter((c) => c !== "js-client");
-
 	$: name = data.name;
+
+	$: prev_obj =
+		$page.params?.jsdoc === "atoms"
+			? "storybook"
+			: js_components[
+					js_components.findIndex((page: any) => page === $page.params?.jsdoc) -
+						1
+				];
+	$: next_obj =
+		js_components[
+			js_components.findIndex((page: any) => page === $page.params?.jsdoc) + 1
+		];
+
 	$: readme_html = data.readme_html;
 </script>

@ -41,7 +53,38 @@
 					See the <a class="link" href="/changelog">Release History</a>
 				</p>
 			</div>
-
+			<div class="w-full flex flex-wrap justify-between my-4">
+				{#if prev_obj}
+					<a
+						href="./{prev_obj}"
+						class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+					>
+						<div class="flex text-lg">
+							<span class="text-orange-500 mr-1">&#8592;</span>
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{prev_obj}
+							</p>
+						</div>
+					</a>
+				{:else}
+					<div />
+				{/if}
+				{#if next_obj}
+					<a
+						href="./{next_obj}"
+						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+					>
+						<div class="flex text-lg">
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{next_obj}
+							</p>
+							<span class="text-orange-500 ml-1">&#8594;</span>
+						</div>
+					</a>
+				{:else}
+					<div />
+				{/if}
+			</div>
 			<div class="js_readme">
 				<div class="lg:ml-10 mt-5">
 					<div class="prose text-lg max-w-full">
@ -49,6 +92,38 @@
 					</div>
 				</div>
 			</div>
+			<div class="w-full flex flex-wrap justify-between my-4">
+				{#if prev_obj}
+					<a
+						href="./{prev_obj}"
+						class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+					>
+						<div class="flex text-lg">
+							<span class="text-orange-500 mr-1">&#8592;</span>
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{prev_obj}
+							</p>
+						</div>
+					</a>
+				{:else}
+					<div />
+				{/if}
+				{#if next_obj}
+					<a
+						href="./{next_obj}"
+						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+					>
+						<div class="flex text-lg">
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{next_obj}
+							</p>
+							<span class="text-orange-500 ml-1">&#8594;</span>
+						</div>
+					</a>
+				{:else}
+					<div />
+				{/if}
+			</div>
 		</div>
 	</div>
 </main>
--- a/js/_website/src/routes/[[version]]/docs/js/storybook/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/js/storybook/+page.svelte
@ -41,14 +41,38 @@
 					See the <a class="link" href="/changelog">Release History</a>
 				</p>
 			</div>
-
-			<div class="flex flex-row ml-10 mt-5">
+			<div class="w-full flex flex-wrap justify-between my-4">
+				<div />
+				<a
+					href="./atoms"
+					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+				>
+					<div class="flex text-lg">
+						<p class="whitespace-nowrap overflow-hidden text-ellipsis">atoms</p>
+						<span class="text-orange-500 ml-1">&#8594;</span>
+					</div>
+				</a>
+			</div>
+			<div class="flex flex-row lg:ml-10 mt-5">
 				<iframe
 					id="storybook"
 					src="https://main--649585a46a67480e3074dc75.chromatic.com/"
-					class="grow m-0 p-0 h-[70vh] border border-gray-200 shadow-xl rounded-xl"
+					class="grow m-0 p-0 h-[70vh] border border-gray-200 shadow-xl rounded-xl w-full"
 				></iframe>
 			</div>
+			<div class="w-full flex flex-wrap justify-between my-4">
+				<div />
+
+				<a
+					href="./atoms"
+					class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+				>
+					<div class="flex text-lg">
+						<p class="whitespace-nowrap overflow-hidden text-ellipsis">atoms</p>
+						<span class="text-orange-500 ml-1">&#8594;</span>
+					</div>
+				</a>
+			</div>
 		</div>
 	</div>
 </main>
--- a/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte
@ -154,15 +154,17 @@
 				</div>
 			{/if}

-			<div class="flex justify-between mt-4 lg:ml-10">
+			<div class="w-full flex flex-wrap justify-between my-4">
 				{#if prev_obj}
 					<a
 						href="./{prev_obj.name}"
-						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 					>
-						<div class="text-lg">
-							<span class="text-orange-500">&#8592;</span>
-							{prev_obj.pretty_name}
+						<div class="flex text-lg">
+							<span class="text-orange-500 mr-1">&#8592;</span>
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{prev_obj.pretty_name}
+							</p>
 						</div>
 					</a>
 				{:else}
@ -171,11 +173,13 @@
 				{#if next_obj}
 					<a
 						href="./{next_obj.name}"
-						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 					>
-						<div class="text-lg">
-							{next_obj.pretty_name}
-							<span class="text-orange-500">&#8594;</span>
+						<div class="flex text-lg">
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{next_obj.pretty_name}
+							</p>
+							<span class="text-orange-500 ml-1">&#8594;</span>
 						</div>
 					</a>
 				{:else}
@ -191,15 +195,17 @@
 				</div>
 			</div>

-			<div class="flex justify-between mt-4 lg:ml-10">
+			<div class="w-full flex flex-wrap justify-between my-4">
 				{#if prev_obj}
 					<a
 						href="./{prev_obj.name}"
-						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 					>
-						<div class="text-lg">
-							<span class="text-orange-500">&#8592;</span>
-							{prev_obj.pretty_name}
+						<div class="flex text-lg">
+							<span class="text-orange-500 mr-1">&#8592;</span>
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{prev_obj.pretty_name}
+							</p>
 						</div>
 					</a>
 				{:else}
@ -208,11 +214,13 @@
 				{#if next_obj}
 					<a
 						href="./{next_obj.name}"
-						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						class="text-right px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 					>
-						<div class="text-lg">
-							{next_obj.pretty_name}
-							<span class="text-orange-500">&#8594;</span>
+						<div class="flex text-lg">
+							<p class="whitespace-nowrap overflow-hidden text-ellipsis">
+								{next_obj.pretty_name}
+							</p>
+							<span class="text-orange-500 ml-1">&#8594;</span>
 						</div>
 					</a>
 				{:else}
--- a/js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte
@ -136,7 +136,7 @@
 				{#if prev_obj}
 					<a
 						href="./{prev_obj.name}"
-						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 					>
 						<div class="text-lg">
 							<span class="text-orange-500">&#8592;</span>
@ -173,7 +173,7 @@
 				{#if prev_obj}
 					<a
 						href="./{prev_obj.name}"
-						class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
+						class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline"
 					>
 						<div class="text-lg">
 							<span class="text-orange-500">&#8592;</span>
--- a/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/guides/[guide]/+page.svelte
@ -1,10 +1,13 @@
 <script lang="ts">
+	// @ts-nocheck
 	import space_logo from "$lib/assets/img/spaces-logo.svg";
 	import MetaTags from "$lib/components/MetaTags.svelte";
 	import { page } from "$app/stores";
 	import DropDown from "$lib/components/VersionDropdown.svelte";
 	import { tick } from "svelte";
 	import FancyDetails from "$lib/components/Details.svelte";
+	import { onNavigate } from "$app/navigation";
+	import { clickOutside } from "$lib/components/clickOutside.js";

 	export let data: {
 		guide: any;
@ -102,6 +105,30 @@
 	}

 	$: content_el && data.guide.new_html && make_details();
+
+	let show_nav = false;
+
+	onNavigate(() => {
+		show_nav = false;
+	});
+
+	$: show_nav;
+
+	function get_category(name: string) {
+		if (guide_names) {
+			for (let category of guide_names) {
+				for (let guide of category.guides) {
+					if (guide.name === name) {
+						return [category.category, guide.pretty_name];
+					}
+				}
+			}
+		}
+	}
+
+	let category_and_name: any[] | undefined = get_category(guide_page.name);
+
+	$: category_and_name = get_category(guide_page.name);
 </script>

 <MetaTags
@ -111,6 +138,50 @@
 	description="A Step-by-Step Gradio Tutorial"
 />
 <div class="container mx-auto px-4 flex relative w-full">
+	<!-- Mobile menu -->
+
+	<div
+		class:hidden={!show_nav}
+		class="fixed inset-0 bg-black/20 backdrop-blur-md lg:hidden z-50"
+	>
+		<div
+			use:clickOutside
+			on:click_outside={() => (show_nav = false)}
+			class:hidden={!show_nav}
+			class="max-w-max min-w-[75%] navigation mobile-nav shadow overflow-y-auto fixed backdrop-blur-lg z-50 bg-white pr-6 pl-4 py-4 -ml-4 h-full inset-0 lg:inset-auto lg:shadow-none lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block lg:rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12 lg:min-w-0"
+			id="mobile-nav"
+		>
+			<button
+				on:click={() => (show_nav = false)}
+				type="button"
+				class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden"
+				tabindex="0"
+				data-svelte-h="svelte-1askwj0"
+			>
+				<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"
+					><path
+						d="M0 0L10 10M10 0L0 10"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					></path></svg
+				>
+			</button>
+
+			{#each guide_names as { category, guides } (category)}
+				<p class="font-semibold px-4 my-2 block">{category}</p>
+				{#each guides as guide, i}
+					<a
+						class:current-nav-link={guide.name == guide_page.name}
+						class="thin-link px-4 block leading-8"
+						href="..{guide.url}">{guide.pretty_name}</a
+					>
+				{/each}
+			{/each}
+		</div>
+	</div>
+
 	<div
 		bind:this={sidebar}
 		class="side-navigation h-screen leading-relaxed sticky top-0 text-md overflow-y-auto overflow-x-hidden hidden lg:block rounded-t-xl bg-gradient-to-r from-white to-gray-50 lg:w-3/12"
@ -174,11 +245,53 @@
 		{/each}
 	</div>
 	<div class="w-full lg:w-8/12 mx-auto">
-		<div class="w-full flex justify-between my-4">
+		<div
+			class="flex items-center p-4 border-b border-t border-slate-900/10 lg:hidden dark:border-slate-50/[0.06]"
+		>
+			<button
+				on:click={() => (show_nav = !show_nav)}
+				type="button"
+				class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+			>
+				<svg width="24" height="24"
+					><path
+						d="M5 6h14M5 12h14M5 18h14"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					></path></svg
+				>
+			</button>
+			{#if category_and_name}
+				<ol class="ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0">
+					<li class="flex items-center">
+						{category_and_name[0]}
+						<svg
+							width="3"
+							height="6"
+							aria-hidden="true"
+							class="mx-3 overflow-visible text-slate-400"
+							><path
+								d="M0 0L3 3L0 6"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+							></path></svg
+						>
+					</li>
+					<li class="font-semibold text-slate-900 truncate dark:text-slate-200">
+						{category_and_name[1]}
+					</li>
+				</ol>
+			{/if}
+		</div>
+		<div class="w-full flex flex-wrap justify-between my-4">
 			{#if prev_guide}
 				<a
 					href="..{prev_guide.url}"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+					class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 				>
 					<div class="flex text-lg">
 						<span class="text-orange-500 mr-1">&#8592;</span>
@ -231,11 +344,11 @@
 		<div class="prose text-lg max-w-full" bind:this={content_el}>
 			{@html guide_page.new_html}
 		</div>
-		<div class="w-full flex justify-between my-4">
+		<div class="w-full flex flex-wrap justify-between my-4">
 			{#if prev_guide}
 				<a
 					href="..{prev_guide.url}"
-					class="text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
+					class="lg:ml-10 text-left px-4 py-1 bg-gray-50 rounded-full hover:underline max-w-[48%]"
 				>
 					<div class="flex text-lg">
 						<span class="text-orange-500 mr-1">&#8592;</span>
--- a/js/_website/src/routes/playground/+page.svelte
+++ b/js/_website/src/routes/playground/+page.svelte
@ -1,9 +1,14 @@
 <script lang="ts">
+	// @ts-nocheck
 	import DemosLite from "../../lib/components/DemosLite.svelte";
 	import MetaTags from "$lib/components/MetaTags.svelte";
 	import { page } from "$app/stores";
 	import { browser } from "$app/environment";
 	import { gradio_logo } from "$lib/assets";
+	import { afterNavigate } from "$app/navigation";
+	import { clickOutside } from "$lib/components/clickOutside.js";
+	import Code from "@gradio/code";
+	import version_json from "$lib/json/version.json";

 	export let data: {
 		demos_by_category: {
@ -32,6 +37,29 @@
 	let show_nav = true;

 	$: show_nav;
+
+	let show_mobile_nav = false;
+
+	$: show_mobile_nav;
+
+	let show_preview = false;
+
+	let on_desktop = false;
+	afterNavigate(() => {
+		if (window.innerWidth > 768) {
+			on_desktop = true;
+		}
+	});
+
+	const mobile_click = (demo_name: string) => {
+		current_selection = demo_name;
+		show_mobile_nav = false;
+	};
+
+	let dummy_elem: any = { classList: { contains: () => false } };
+	let dummy_gradio: any = { dispatch: (_) => {} };
+
+	let version = version_json.version;
 </script>

 <MetaTags
@ -46,10 +74,16 @@
 		type="module"
 		src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"
 	></script>
+	<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
+	<script
+		id="gradio-js-script"
+		type="module"
+		src="https://gradio.s3-us-west-2.amazonaws.com/{version}/gradio.js"
+	></script>
 </svelte:head>

-<!-- 4.0 Launch BANNER  -->
-<div class="flex-row">
+<!-- Header on Desktop -->
+<div class="flex-row hidden md:flex">
 	<div class="flex flex-row relative items-center px-1 py-1 pr-6 text-lg gap-8">
 		<div class="flex">
 			<a href="/">
@ -71,57 +105,293 @@
 	</div>
 </div>

-<main class="playground flex flex-col justify-between">
-	<div class="container mx-auto px-4 gap-4">
-		<p class="mt-4 mb-8 text-lg text-gray-600 md:hidden">
-			Playground renders best on desktop.
-		</p>
-	</div>
-
-	<div class="w-full border border-gray-200 shadow-xl h-full relative">
-		<div
-			class="w-[200px] h-full rounded-tr-none rounded-bl-xl overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
-			style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; width: {show_nav
-				? 200
-				: 37}px;"
-		>
-			<div class="flex justify-between align-middle h-8 border-b px-2">
+<!-- Desktop -->
+{#if on_desktop}
+	<main class="playground flex-col justify-between hidden md:flex">
+		<div class="w-full border border-gray-200 shadow-xl h-full relative">
+			<div
+				class="w-[200px] h-full rounded-tr-none rounded-bl-xl overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
+				style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; width: {show_nav
+					? 200
+					: 37}px;"
+			>
+				<div class="flex justify-between align-middle h-8 border-b px-2">
+					{#if show_nav}
+						<h3 class="pl-2 pt-1">Demos</h3>
+					{/if}
+					<button
+						on:click={() => (show_nav = !show_nav)}
+						class="float-right text-gray-600 pl-1"
+						>{#if show_nav}&larr;{:else}&rarr;{/if}</button
+					>
+				</div>
 				{#if show_nav}
-					<h3 class="pl-2 pt-1">Demos</h3>
-				{/if}
-				<button
-					on:click={() => (show_nav = !show_nav)}
-					class="float-right text-gray-600 pl-1"
-					>{#if show_nav}&larr;{:else}&rarr;{/if}</button
-				>
-			</div>
-			{#if show_nav}
-				<button
-					on:click={() => (current_selection = "Blank")}
-					class:current-playground-demo={current_selection == "Blank"}
-					class:shared-link={shared == "Blank"}
-					class="thin-link font-light px-4 mt-2 block">Blank</button
-				>
-				{#each data.demos_by_category as { category, demos } (category)}
-					<p class="px-4 my-2">{category}</p>
-					{#each demos as demo, i}
-						<button
-							on:click={() => (current_selection = demo.name)}
-							class:current-playground-demo={current_selection == demo.name}
-							class:shared-link={shared == demo.name}
-							class="thin-link font-light px-4 block">{demo.name}</button
-						>
+					<button
+						on:click={() => (current_selection = "Blank")}
+						class:current-playground-demo={current_selection == "Blank"}
+						class:shared-link={shared == "Blank"}
+						class="thin-link font-light px-4 mt-2 block">Blank</button
+					>
+					{#each data.demos_by_category as { category, demos } (category)}
+						<p class="px-4 my-2">{category}</p>
+						{#each demos as demo, i}
+							<button
+								on:click={() => (current_selection = demo.name)}
+								class:current-playground-demo={current_selection == demo.name}
+								class:shared-link={shared == demo.name}
+								class="thin-link font-light px-4 block">{demo.name}</button
+							>
+						{/each}
 					{/each}
+				{/if}
+			</div>
+
+			<DemosLite demos={all_demos} {current_selection} {show_nav} />
+		</div>
+	</main>
+{:else}
+	<!-- Mobile -->
+	<main class="playground flex-col justify-between flex md:hidden">
+		<div
+			class:hidden={!show_mobile_nav}
+			class="fixed inset-0 bg-black/20 backdrop-blur-md lg:hidden z-50"
+		></div>
+		<div
+			use:clickOutside
+			on:click_outside={() => (show_mobile_nav = false)}
+			class:hidden={!show_mobile_nav}
+			class="max-w-max min-w-[75%] navigation mobile-nav shadow overflow-y-auto fixed backdrop-blur-lg z-50 bg-white pr-6 pl-4 py-4 -ml-4 h-full inset-0 lg:inset-auto lg:shadow-none lg:ml-0 lg:z-0 lg:backdrop-blur-none lg:navigation lg:p-0 lg:pb-4 lg:h-screen lg:leading-relaxed lg:sticky lg:top-0 lg:text-md lg:block lg:rounded-t-xl lg:bg-gradient-to-r lg:from-white lg:to-gray-50 lg:overflow-x-clip lg:w-2/12 lg:min-w-0"
+			id="mobile-nav"
+		>
+			<button
+				on:click={() => (show_mobile_nav = false)}
+				type="button"
+				class="absolute z-10 top-4 right-4 w-2/12 h-4 flex items-center justify-center text-grey-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 p-4 lg:hidden"
+				tabindex="0"
+				data-svelte-h="svelte-1askwj0"
+			>
+				<svg viewBox="0 0 10 10" class="overflow-visible" style="width: 10px"
+					><path
+						d="M0 0L10 10M10 0L0 10"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					></path></svg
+				>
+			</button>
+
+			{#each data.demos_by_category as { category, demos } (category)}
+				<p class="font-semibold px-4 my-2 block">{category}</p>
+				{#each demos as demo, i}
+					<button
+						on:click={() => mobile_click(demo.name)}
+						class:current-playground-demo={current_selection == demo.name}
+						class:shared-link={shared == demo.name}
+						class="thin-link font-light px-4 block">{demo.name}</button
+					>
 				{/each}
-			{/if}
+			{/each}
 		</div>

-		<DemosLite demos={all_demos} {current_selection} {show_nav} />
-	</div>
-</main>
+		{#each data.demos_by_category as { category, demos } (category)}
+			{#each demos as demo, i}
+				<div
+					class:hidden={current_selection !== demo.name}
+					class="flex items-center p-4 border-t border-slate-900/10 lg:hidden dark:border-slate-50/[0.06]"
+				>
+					<button
+						on:click={() => (show_mobile_nav = !show_mobile_nav)}
+						type="button"
+						class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+					>
+						<svg width="24" height="24"
+							><path
+								d="M5 6h14M5 12h14M5 18h14"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+							></path></svg
+						>
+					</button>
+					{#if category}
+						<ol class="ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0">
+							<li class="flex items-center">
+								{category}
+								<svg
+									width="3"
+									height="6"
+									aria-hidden="true"
+									class="mx-3 overflow-visible text-slate-400"
+									><path
+										d="M0 0L3 3L0 6"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="1.5"
+										stroke-linecap="round"
+									></path></svg
+								>
+							</li>
+							<li
+								class="font-semibold text-slate-900 truncate dark:text-slate-200"
+							>
+								{demo.name}
+							</li>
+						</ol>
+					{/if}
+				</div>
+				<div
+					class:hidden={current_selection !== demo.name}
+					class="mobile-window w-[95%] mx-auto relative border rounded-xl border-gray-200 shadow md:hidden"
+				>
+					{#if !show_preview}
+						<Code
+							bind:value={demos[i].code}
+							label=""
+							language="python"
+							target={dummy_elem}
+							gradio={dummy_gradio}
+							lines={10}
+							interactive="false"
+						/>
+					{:else}
+						<gradio-app space={"gradio/" + demo.dir} />
+					{/if}
+				</div>
+			{/each}
+		{/each}
+		<div class="mx-auto mt-4 flex flex-row items-center gap-4">
+			<span
+				class:text-gray-500={show_preview}
+				class:text-gray-600={!show_preview}
+				class:font-semibold={!show_preview}
+				class="text-lg">Code</span
+			>
+			<label class="switch">
+				<input
+					on:click={() => (show_preview = !show_preview)}
+					type="checkbox"
+					class=""
+				/>
+				<span class="slider round"></span>
+			</label>
+			<span
+				class:text-gray-500={!show_preview}
+				class:text-gray-600={show_preview}
+				class:font-semibold={show_preview}
+				class="text-lg">Preview</span
+			>
+		</div>
+		<p class="mt-4 mx-auto text-lg text-gray-600 text-center md:hidden">
+			To edit code and see live changes, use Playground on a desktop.
+		</p>
+	</main>
+{/if}

 <style>
 	.code {
 		white-space: pre-wrap;
 	}
+	:global(body) {
+		min-height: 100vh;
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+	}
+
+	.switch {
+		position: relative;
+		width: 60px;
+		height: 34px;
+	}
+
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #ccc;
+		-webkit-transition: 0.4s;
+		transition: 0.4s;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: "";
+		height: 26px;
+		width: 26px;
+		left: 4px;
+		bottom: 4px;
+		background-color: white;
+		-webkit-transition: 0.4s;
+		transition: 0.4s;
+	}
+
+	input:checked + .slider {
+		background-color: #fc963c;
+	}
+
+	input:focus + .slider {
+		box-shadow: 0 0 1px #fc963c;
+	}
+
+	input:checked + .code-btn {
+		color: #fc963c !important;
+	}
+	input:focus + .code-btn {
+		color: #fc963c !important;
+	}
+
+	input:checked + .slider:before {
+		-webkit-transform: translateX(26px);
+		-ms-transform: translateX(26px);
+		transform: translateX(26px);
+	}
+
+	.slider.round {
+		border-radius: 34px;
+	}
+
+	.slider.round:before {
+		border-radius: 50%;
+	}
+
+	.code-mobile .block {
+		height: 100%;
+	}
+
+	.mobile-window {
+		height: 58vh;
+		overflow-y: scroll;
+	}
+
+	:global(.mobile-window .embed-container .main) {
+		margin: 0 !important;
+		overflow: scroll;
+	}
+	:global(.mobile-window gradio-app) {
+		height: 100%;
+		display: flex;
+	}
+	:global(.mobile-window .gradio-container) {
+		width: 100%;
+		margin: 0px !important;
+	}
+
+	:global(.mobile-window .block .wrap) {
+		display: grid;
+	}
+
+	:global(.mobile-window .block) {
+		height: 100%;
+		overflow: hidden !important;
+	}
 </style>