diff --git a/src/components/big-interactive-pages/desktop-player.module.css b/src/components/big-interactive-pages/desktop-player.module.css
index 5479a71644..105187eed9 100644
--- a/src/components/big-interactive-pages/desktop-player.module.css
+++ b/src/components/big-interactive-pages/desktop-player.module.css
@@ -2,19 +2,37 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	position: fixed; /* TODO: this is bad! figure out how to make better */
-	top: 0;
-	height: 100vh;
-	width: 100vw;
+	width: 100%;
+	height: 100%;
+	flex: 1;
+	min-height: 0;
 }
 
 .root {
 	display: flex;
-	margin: 20px
+	margin: 20px;
+	max-width: 100%;
+	max-height: 100%;
+	align-items: center;
+	justify-content: center;
 }
 
 .screenContainer {
 	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+.canvasWrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	max-width: 100%;
+	max-height: 100%;
+	min-height: 0;
 }
 
 .screen {
@@ -25,7 +43,13 @@
 	aspect-ratio: 1000 / 800;
 	image-rendering: pixelated;
 	outline: none;
-	width: 100%;
+	width: auto;
+	max-width: 100%;
+	max-height: min(800px, calc(100vh - 120px));
+}
+
+.embedded .screen {
+	max-height: min(800px, calc(100vh - 250px));
 }
 
 .screenControls {
@@ -37,7 +61,6 @@
 	gap: 10px;
 	align-items: center;
 	padding: 8px 0;
-	position: absolute;
 	width: 100%;
 }
 
@@ -49,35 +72,82 @@
 	margin-left: 30px;
 }
 
-@media all and (display-mode: fullscreen) {
-	.screenControls {
-		display: none;
-	}
-	
-	.screenContainer {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	
-	.screen {
-		border: none;
-		height: 100%;
-		width: unset
-	}
-	
-	.canvasWrapper {
-		height: 100%;
-	}
-	
-	.screenControls.enabled {
-		display: flex;
-		position: relative;
-		bottom: 0;
-		width: 100%;
-		background: var(--bg-base);
-		padding: 8px 20px;
-	}
+.screenContainer:fullscreen {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: #000000;
+	width: 100vw;
+	height: 100vh;
+}
+
+.screenContainer:-webkit-full-screen {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: #000000;
+	width: 100vw;
+	height: 100vh;
+}
+
+.screenContainer:fullscreen .screenControls {
+	display: none;
+}
+
+.screenContainer:-webkit-full-screen .screenControls {
+	display: none;
+}
+
+.screenContainer:fullscreen .screen {
+	border: none;
+	width: min(100%, calc(100vh * 1.25));
+	height: min(100%, calc(100vw * 0.8));
+	aspect-ratio: 1000 / 800;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+.screenContainer:-webkit-full-screen .screen {
+	border: none;
+	width: min(100%, calc(100vh * 1.25));
+	height: min(100%, calc(100vw * 0.8));
+	aspect-ratio: 1000 / 800;
+	max-height: 100%;
+	max-width: 100%;
+}
+
+.screenContainer:fullscreen .canvasWrapper {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.screenContainer:-webkit-full-screen .canvasWrapper {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.screenContainer:fullscreen .screenControls.enabled {
+	display: flex;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	background: var(--bg-base);
+	padding: 8px 20px;
+}
+
+.screenContainer:-webkit-full-screen .screenControls.enabled {
+	display: flex;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	background: var(--bg-base);
+	padding: 8px 20px;
 }
 
 .screenControls .mute,
diff --git a/src/components/big-interactive-pages/desktop-player.tsx b/src/components/big-interactive-pages/desktop-player.tsx
index 3136e53fca..06b835e065 100644
--- a/src/components/big-interactive-pages/desktop-player.tsx
+++ b/src/components/big-interactive-pages/desktop-player.tsx
@@ -30,6 +30,7 @@ interface DesktopPlayerProps {
 	filename: string
 	isLoggedIn: boolean
 	hearted: boolean
+	embedded?: boolean
 }
 
 export default function DesktopPlayer(props: DesktopPlayerProps) {
@@ -159,7 +160,7 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 	});
 	
 	return (
-		<div className={styles.rootContainer}>
+		<div className={`${styles.rootContainer} ${props.embedded ? styles.embedded : ''}`}>
 		<div className={styles.root}>
 			<div ref={screenContainer} style={outputArea.current ? {
 				height: canvasScreenSize.value.height,
@@ -224,6 +225,7 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 					</button>
 				</div>
 			</div>
+			{!props.embedded && (
 			<div className={styles.meta} id="desktop-player-meta">
 				<div>
 					<div class={styles.title}>
@@ -296,7 +298,8 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 					</Button>
 				</div>
 				</div>
-				</div>
+			</div>
+			)}
 			</div>
 		</div>
 	)
diff --git a/src/components/navbar-main.tsx b/src/components/navbar-main.tsx
index 3592dffd2f..ddd9154d6a 100644
--- a/src/components/navbar-main.tsx
+++ b/src/components/navbar-main.tsx
@@ -57,7 +57,7 @@ export default function MainNavbar(props: MainNavbarProps) {
 								<IoLogoGithub />
 							</a>
 						</li>
-						<li>
+						<li class={styles.navActions}>
 							{props.children || (
 								<a href="/~/new-game">
 									<Button icon={IoAdd}>New Game</Button>
@@ -86,10 +86,12 @@ export default function MainNavbar(props: MainNavbarProps) {
 						<li class={styles.plainLink}>
 							<a href="/login">Log In</a>
 						</li>
-						<li>
-							<a href="/editor">
-								<Button>Open Editor</Button>
-							</a>
+						<li class={styles.navActions}>
+							{props.children || (
+								<a href="/editor">
+									<Button>Open Editor</Button>
+								</a>
+							)}
 						</li>
 					</>
 				)}
diff --git a/src/components/navbar.module.css b/src/components/navbar.module.css
index c463bf7485..7c6849cd8d 100644
--- a/src/components/navbar.module.css
+++ b/src/components/navbar.module.css
@@ -101,6 +101,12 @@
 	gap: 14px;
 }
 
+.navActions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
 /* Logo */
 .logo a,
 .logo button {
@@ -470,6 +476,21 @@
 	}
 }
 
+@media (max-width: 480px) {
+	.rightActions {
+		gap: 8px;
+		flex-wrap: wrap;
+		height: auto;
+		justify-content: center;
+		padding-bottom: 6px;
+	}
+
+	.navActions {
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+}
+
 @media (max-width: 420px) {
 	.container {
 		font-size: 0.9rem;
diff --git a/src/pages/gallery/play/[id].astro b/src/pages/gallery/play/[id].astro
index 30c2fe829b..1168dacd5c 100644
--- a/src/pages/gallery/play/[id].astro
+++ b/src/pages/gallery/play/[id].astro
@@ -9,7 +9,7 @@ import DesktopPlayer from '../../../components/big-interactive-pages/desktop-pla
 import fs from 'fs'
 import path from 'path'
 import Button from '../../../components/design-system/button'
-import { IoShuffle } from 'react-icons/io5'
+import { IoShuffle, IoCode } from 'react-icons/io5'
 
 interface Props {
   game: GameMetadata;
@@ -160,37 +160,18 @@ const props: Props = {
       display: flex;
       flex-direction: column;
       width: 100%;
-      height: 800px;
+      min-height: 0;
       position: relative;
-      overflow: hidden;
-    }
-
-    :global(.rootContainer) {
-      position: absolute !important;
-      height: 100% !important;
-      width: 100% !important;
-      top: 0 !important;
-      left: 0 !important;
-      overflow: hidden !important;
-    }
-
-    /* Hide the metadata panel */
-    :global(#desktop-player-meta) {
-      display: none !important;
-    }
-
-    :global(.screen) {
-      aspect-ratio: 1.25;
-      border: 2px solid var(--accent);
-      background: #000000;
-      image-rendering: pixelated;
-      max-height: 70vh;
-      width: auto;
     }
   </style>
 </head>
 <body>
   <MainNavbar session={props.session}>
+    {type !== 'document' && (
+      <a href={`/gallery/${props.game.filename}`}>
+        <Button icon={IoCode}>View Code</Button>
+      </a>
+    )}
     <a href={`/~/new-game?remix=${props.game.filename}`}>
       <Button icon={IoShuffle}>Remix Game</Button>
     </a>
@@ -219,8 +200,9 @@ const props: Props = {
         filename={props.game.filename}
         isLoggedIn={!!props.session?.session.full}
         hearted={false}
+        embedded={true}
       />
     </div>
   </div>
 </body>
-</html> 
\ No newline at end of file
+</html>