Skip to content

Fix gallery play page layout overflow and show action buttons for guests #4401

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SSoggyTacoMan wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix gallery play page layout overflow and show action buttons for guests #4401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
17e575d
Add view code link
anirban185 Jul 18, 2026
fb80c33
Fix player overflow
anirban185 Jul 18, 2026
d201cd8
Fix gallery play player overflow and show action buttons for guests
SSoggyTacoMan Oct 16, 2026
30898cd
Fix fullscreen canvas aspect ratio and remove obsolete display-mode m…
SSoggyTacoMan Oct 16, 2026
1fcbf62
Fix mobile navbar overflow and add legacy WebKit fullscreen support
SSoggyTacoMan Oct 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 106 additions & 36 deletions src/components/big-interactive-pages/desktop-player.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -37,7 +61,6 @@
gap: 10px;
align-items: center;
padding: 8px 0;
position: absolute;
width: 100%;
}

Expand All @@ -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,
Expand Down
7 changes: 5 additions & 2 deletions src/components/big-interactive-pages/desktop-player.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ interface DesktopPlayerProps {
filename: string
isLoggedIn: boolean
hearted: boolean
embedded?: boolean
}

export default function DesktopPlayer(props: DesktopPlayerProps) {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -296,7 +298,8 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
</Button>
</div>
</div>
</div>
</div>
)}
</div>
</div>
)
Expand Down
12 changes: 7 additions & 5 deletions src/components/navbar-main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
</>
)}
Expand Down
21 changes: 21 additions & 0 deletions src/components/navbar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,12 @@
gap: 14px;
}

.navActions {
display: flex;
align-items: center;
gap: 8px;
}

/* Logo */
.logo a,
.logo button {
Expand Down Expand Up @@ -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;
Expand Down
36 changes: 9 additions & 27 deletions src/pages/gallery/play/[id].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -219,8 +200,9 @@ const props: Props = {
filename={props.game.filename}
isLoggedIn={!!props.session?.session.full}
hearted={false}
embedded={true}
/>
</div>
</div>
</body>
</html>
</html>
Loading