Conversation
There was a problem hiding this comment.
Pull request overview
This PR focuses on improving the frontend mobile experience (layout, touch targets, orientation handling) and adds basic PWA support (manifest + service worker), alongside wiring the Memory panel into the app shell.
Changes:
- Add global + component-level mobile/landscape responsive styles and sprite layout overrides.
- Introduce
useIsMobile()and adjust parallax/orientation behavior for better mobile handling. - Add PWA assets (manifest, icons, favicon) + service worker registration.
Reviewed changes
Copilot reviewed 32 out of 33 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles/reset.css | Adds #app sizing/overflow baseline for layout containment. |
| frontend/src/styles/mobile.css | New global mobile media-query overrides (overscroll, scene touch behavior, overflow). |
| frontend/src/main.ts | Imports mobile CSS and registers service worker in production. |
| frontend/src/constants/sprites.ts | Extends sprite data with mobile/landscape overrides and updates sprite definitions. |
| frontend/src/composables/useParallax.ts | Tweaks max parallax offset for portrait mobile and adds orientationchange handling. |
| frontend/src/composables/useIsMobile.ts | New composable for responsive breakpoint/orientation detection via matchMedia. |
| frontend/src/components/scene/SpritesLayer.vue | Applies responsive sprite positioning, adjusts click handling, and improves mobile bubble/label styling. |
| frontend/src/components/scene/NavBar.vue | Adds mobile sizing rules for nav controls. |
| frontend/src/components/scene/HintOverlay.vue | Mobile-specific hint text + responsive hint styling. |
| frontend/src/components/scene/BeachScene.vue | Uses 100dvh and sets scene background for mobile viewport correctness. |
| frontend/src/components/overlay/WhisperPanel.vue | Mobile padding/typography/tap-target tweaks. |
| frontend/src/components/overlay/TaskPanel.vue | Mobile padding/typography/tap-target tweaks. |
| frontend/src/components/overlay/RoleSelectPanel.vue | Updates breakpoint to 768px, adds dvh, and adds landscape-specific layout. |
| frontend/src/components/overlay/OverlayPanel.vue | Mobile fullscreen overlay behavior + landscape sizing adjustments. |
| frontend/src/components/overlay/MemoryPanel.vue | Mobile layout/tap-target adjustments. |
| frontend/src/components/overlay/LandingOverlay.vue | Mobile sizing/typography tweaks for landing screen. |
| frontend/src/components/overlay/CommunityPanel.vue | Mobile padding/typography/input sizing adjustments. |
| frontend/src/components/overlay/ChatPanel.vue | Mobile spacing and input sizing adjustments. |
| frontend/src/components/overlay/CarPage.vue | Adds mobile profile/suitcase buttons and extensive mobile layout adjustments. |
| frontend/src/components/overlay/BarPage.vue | Uses useIsMobile() to make note layout responsive; adds mobile CSS rules. |
| frontend/src/components/overlay/AuthPanel.vue | Mobile padding/input/button sizing adjustments. |
| frontend/src/components/overlay/AiMemoryPanel.vue | Mobile layout/tap-target adjustments. |
| frontend/src/App.vue | Ensures MemoryPanel is mounted in the root app. |
| frontend/public/sw.js | Adds a minimal navigation-fallback service worker. |
| frontend/public/manifest.json | Adds PWA manifest metadata and icon references. |
| frontend/public/icons/icon-maskable-512.png | Adds maskable icon (Git LFS). |
| frontend/public/icons/icon-512.png | Adds 512px icon (Git LFS). |
| frontend/public/icons/icon-192.png | Adds 192px icon (Git LFS). |
| frontend/public/favicon.svg | Adds SVG favicon. |
| frontend/index.html | Adds PWA meta tags, manifest link, icons, and updates title. |
| frontend/eslint.config.js | Formatting updates and ignores public/ from linting. |
| frontend/.dockerignore | Adds frontend Docker build context ignores. |
| backend/.dockerignore | Adds backend Docker build context ignores. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+16
to
+36
| let mql768: MediaQueryList; | ||
| let mql480: MediaQueryList; | ||
| let mqlLandscape: MediaQueryList; | ||
|
|
||
| onMounted(() => { | ||
| mql768 = window.matchMedia("(max-width: 768px)"); | ||
| mql480 = window.matchMedia("(max-width: 480px)"); | ||
| mqlLandscape = window.matchMedia( | ||
| "(max-height: 500px) and (orientation: landscape)", | ||
| ); | ||
| update(); | ||
| mql768.addEventListener("change", update); | ||
| mql480.addEventListener("change", update); | ||
| mqlLandscape.addEventListener("change", update); | ||
| }); | ||
|
|
||
| onUnmounted(() => { | ||
| mql768?.removeEventListener("change", update); | ||
| mql480?.removeEventListener("change", update); | ||
| mqlLandscape?.removeEventListener("change", update); | ||
| }); |
Comment on lines
+3
to
+14
| export function useIsMobile() { | ||
| const isMobile = ref(false); | ||
| const isSmall = ref(false); | ||
| const isLandscape = ref(false); | ||
|
|
||
| function update() { | ||
| isMobile.value = window.matchMedia("(max-width: 768px)").matches; | ||
| isSmall.value = window.matchMedia("(max-width: 480px)").matches; | ||
| isLandscape.value = window.matchMedia( | ||
| "(max-height: 500px) and (orientation: landscape)", | ||
| ).matches; | ||
| } |
Add backend/ and frontend/ .dockerignore files to exclude .env, secrets, IDE configs, build artifacts, and other non-source files from the Docker build context. Resolves SonarCloud security hotspot about recursive COPY potentially including sensitive data.
- Fix #app not filling viewport with width/height/overflow in reset.css - Add mobile.css with orientation-specific styles for portrait/landscape - Add useIsMobile composable for reactive breakpoint detection (768/480px) - Import mobile.css in main.ts - Fix deprecated apple-mobile-web-app-capable meta tag - Add SVG favicon, PWA manifest.json, service worker, and icon assets - Add public/ to ESLint ignores (static assets)
- Listen for orientationchange event with 150ms delay for recalculation - Add background-color fallback to BeachScene
- Add mobile override field to SpriteData for responsive positioning - Use useIsMobile in SpritesLayer to apply mobile-specific top/left/width - Add mobile max-width and text wrapping to speech bubbles - Add mobile touch target sizes and spacing to NavBar and HintOverlay
- Make overlay panels fill viewport on mobile (100vw x 100dvh) - Add landscape media query for 80vw width with rounded corners - Add landscape layout for RoleSelectPanel with side-by-side roles
Add responsive mobile and landscape styles to AuthPanel, ChatPanel, WhisperPanel, MemoryPanel, TaskPanel, AiMemoryPanel, CommunityPanel, and LandingOverlay for proper display on small screens.
CarPage: Replace car interior background with centered wooden board on mobile, show 3-column photo grid, add floating profile and suitcase buttons for mobile access. BarPage: Make column count responsive (4 desktop, 2 mobile) using useIsMobile composable with computed layout constants.
Spread out overlapping sprites on mobile by tuning left/top/width overrides for car, chair, shell, mailbox, and crab. Skip inline labelSize on mobile so the CSS media query (0.7rem) takes effect.
- Fix dvh/vh fallback order: put vh first, dvh second so dynamic viewport height takes effect on supporting browsers - Move touch-action: pan-x from body to .scene to avoid blocking vertical scrolling in overlay panels - Gate service worker registration behind import.meta.env.PROD - Extract resize/orientationchange to named handlers and clean up in onUnmounted to prevent listener leaks
|
koishi510
approved these changes
Mar 14, 2026
4rthurCai
added a commit
that referenced
this pull request
Mar 14, 2026
- Initialize MediaQueryList variables as undefined to prevent potential errors if onUnmounted runs before onMounted - Compute initial isMobile/isSmall/isLandscape values synchronously in setup() to avoid layout flash on first render - Extract media query strings to module-level constants
4rthurCai
added a commit
that referenced
this pull request
Mar 14, 2026
- Initialize MediaQueryList variables as undefined to prevent potential errors if onUnmounted runs before onMounted - Compute initial isMobile/isSmall/isLandscape values synchronously in setup() to avoid layout flash on first render - Extract media query strings to module-level constants
4rthurCai
added a commit
that referenced
this pull request
Mar 14, 2026
- Initialize MediaQueryList variables as undefined to prevent potential errors if onUnmounted runs before onMounted - Compute initial isMobile/isSmall/isLandscape values synchronously in setup() to avoid layout flash on first render - Extract media query strings to module-level constants
koishi510
pushed a commit
that referenced
this pull request
Mar 14, 2026
- Initialize MediaQueryList variables as undefined to prevent potential errors if onUnmounted runs before onMounted - Compute initial isMobile/isSmall/isLandscape values synchronously in setup() to avoid layout flash on first render - Extract media query strings to module-level constants
4rthurCai
added a commit
that referenced
this pull request
Mar 14, 2026
- Initialize MediaQueryList variables as undefined to prevent potential errors if onUnmounted runs before onMounted - Compute initial isMobile/isSmall/isLandscape values synchronously in setup() to avoid layout flash on first render - Extract media query strings to module-level constants
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Summary
Change Type
Self-Check Checklist
Backend (Go):
go build ./...passesgo vet ./...passesgofmtproduces no diffFrontend (Vue):
npm run lintpassesnpm run typecheckpassesGeneral:
Test Steps