Merge pull request #71 from nka21/feature/63

全画面のモバイルサイズのデザイン調整

Author: miyakoshi-3854

apps/web/src/App.module.css

@@ -7,6 +7,14 @@
   padding: 0;
 }
 
+.screen {
+  width: 100%;
+  height: 100%;
+  border-radius: 36px;
+  overflow: hidden;
+  position: relative;
+}
+
 .phone-container {
   width: 375px;
   height: 812px;
@@ -20,6 +28,19 @@
   overflow-x: hidden;
 }
 
+@media (max-width: 460px) {
+  .phone-container {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .screen {
+    border-radius: 0;
+  }
+}
+
 /* テスト用の結果画面 */
 .testResult {
   padding: 20px;

apps/web/src/components/home/HomeScreen.module.css

@@ -77,20 +77,6 @@
   }
 }
 
-.screen {
-  width: 100%;
-  height: 100%;
-  border-radius: 36px;
-  overflow: hidden;
-  position: relative;
-  display: none;
-}
-
-.screen.active {
-  display: block;
-  animation: fadeIn 0.4s ease-out;
-}
-
 .home-screen {
   background: linear-gradient(
     180deg,
@@ -130,7 +116,7 @@
   font-size: 20px;
   color: var(--text-secondary);
   margin-top: 0px;
-  margin-bottom: 40px;
+  margin-bottom: 60px;
   line-height: 1.5;
   opacity: 0;
   transform: translateY(20px);
@@ -140,7 +126,7 @@
 .character-area {
   width: 85%;
   height: 85%;
-  margin-bottom: 60px;
+  margin-bottom: 80px;
   opacity: 0;
   position: relative;
   transform: scale(0.8);

apps/web/src/components/home/HomeScreen.tsx

@@ -7,6 +7,8 @@ import { motion } from 'framer-motion';
 import huntoru from '../../assets/huntoru.png';
 import styles from './HomeScreen.module.css';
 
+import components from '@/web/App.module.css';
+
 export const HomeScreen = () => {
   const navigate = useNavigate();
 
@@ -16,7 +18,7 @@ export const HomeScreen = () => {
 
   return (
     <motion.div
-      className={clsx(styles.screen, styles['home-screen'], styles.active)}
+      className={clsx(components.screen, styles['home-screen'], styles.active)}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0, x: -100 }}

apps/web/src/components/mode/ModeScreen.module.css

@@ -1,11 +1,3 @@
-.screen {
-  width: 100%;
-  height: 100%;
-  border-radius: 36px;
-  overflow: hidden;
-  position: relative;
-}
-
 .content {
   height: 100%;
   position: relative;
@@ -25,6 +17,12 @@
   padding: 40px 20px 30px;
 }
 
+@media (max-width: 460px) {
+  .difficulty-header {
+    padding: 80px 20px 30px;
+  }
+}
+
 .pixel-bubble {
   position: absolute;
   width: 220px;
@@ -45,6 +43,21 @@
   font-family: 'Courier New', Courier;
 }
 
+@media (max-width: 460px) {
+  .pixel-bubble {
+    position: absolute;
+    width: 220px;
+    height: 220px;
+    top: 10px;
+    left: 60px;
+    color: var(--primary-bg);
+  }
+  .pixel-bubble-text {
+    top: 77px;
+    left: 85px;
+  }
+}
+
 .huntoru-icon {
   width: 80px;
   position: relative;

apps/web/src/components/mode/ModeScreen.tsx

@@ -8,6 +8,7 @@ import huntoru from '../../assets/huntoru.png';
 import { PixelBubble } from '../ui/PixelBubble';
 import styles from './ModeScreen.module.css';
 
+import components from '@/web/App.module.css';
 import { API_CONFIG } from '@/web/lib/api';
 import type { Theme } from '@/web/types';
 
@@ -37,7 +38,7 @@ export const ModeScreen = () => {
 
   return (
     <motion.div
-      className={clsx(styles.screen, styles['difficulty-screen'])}
+      className={clsx(components.screen, styles['difficulty-screen'])}
       initial={{ opacity: 0, x: 100 }}
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: -100 }}

apps/web/src/components/photo/PhotoPreview.module.css

@@ -1,12 +1,3 @@
-.screen {
-  width: 100%;
-  height: 100%;
-  border-radius: 36px;
-  overflow: hidden;
-  position: relative;
-  /* display: none; */
-}
-
 /* Screen 3.5: Photo Preview Screen */
 .preview-screen {
   background: linear-gradient(
@@ -27,6 +18,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
+  box-sizing: border-box;
 }
 
 .time-info {
@@ -83,8 +75,8 @@
   font-size: 16px;
   font-weight: 500;
   text-align: center;
-  min-height: 300px;
-  max-height: 400px;
+  /* min-height: 300px; */
+  max-height: calc(100vh - 460px);
   border: 3px solid var(--warm-brown);
   box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
   overflow: hidden;
@@ -96,6 +88,12 @@
   }
 }
 
+@media (max-width: 460px) {
+  .photo-preview-area {
+    max-height: calc(100vh - 420px);
+  }
+}
+
 .preview-actions {
   display: flex;
   flex-direction: column;

apps/web/src/components/photo/PhotoPreview.tsx

@@ -6,6 +6,7 @@ import { motion } from 'framer-motion';
 
 import styles from './PhotoPreview.module.css';
 
+import components from '@/web/App.module.css';
 import { API_CONFIG } from '@/web/lib/api';
 
 interface PhotoPreviewProps {
@@ -82,7 +83,7 @@ export const PhotoPreview = (props: PhotoPreviewProps) => {
 
   return (
     <motion.div
-      className={clsx(styles['screen'], styles['preview-screen'])}
+      className={clsx(components.screen, styles['preview-screen'])}
       initial={{ opacity: 0, x: 100 }}
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: -100 }}

apps/web/src/components/photo/PhotoScreen.module.css

@@ -1,10 +1,7 @@
-.screen {
-  width: 100%;
+.content {
   height: 100%;
-  border-radius: 36px;
-  overflow: hidden;
   position: relative;
-  /* display: none; */
+  overflow-y: auto;
 }
 
 .photo-screen {
@@ -15,7 +12,7 @@
   );
 }
 
-.photo-Content {
+.photo-content {
   height: 100%;
   position: relative;
   display: flex;
@@ -93,6 +90,12 @@
   transition: all 0.3s ease;
 }
 
+@media (max-width: 460px) {
+  .camera-main {
+    flex: 1;
+  }
+}
+
 /* Camera UI Elements */
 .camera-overlay {
   position: absolute;

apps/web/src/components/photo/PhotoScreen.tsx

@@ -8,6 +8,7 @@ import { motion } from 'framer-motion';
 import { Camera } from '../camera';
 import styles from './PhotoScreen.module.css';
 
+import components from '@/web/App.module.css';
 import type { CameraRef } from '@/web/components/camera/types';
 import type { Theme } from '@/web/types';
 
@@ -140,7 +141,7 @@ export const PhotoScreen = () => {
 
   return (
     <motion.div
-      className={clsx(styles['screen'], styles['photo-screen'])}
+      className={clsx(components.screen, styles['photo-screen'])}
       initial={{ opacity: 0, x: 100 }}
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: -100 }}

apps/web/src/components/result/ResultScreen.module.css

@@ -1,11 +1,3 @@
-.screen {
-  width: 100%;
-  height: 100%;
-  border-radius: 36px;
-  overflow: hidden;
-  position: relative;
-}
-
 .result-screen {
   background: linear-gradient(
     180deg,