From 0b53093acddb49832f3d3017f9a67086a28bc350 Mon Sep 17 00:00:00 2001
From: "m::r" <mainstreamer@outlook.com>
Date: Fri, 16 Jan 2026 01:38:53 +0000
Subject: [PATCH] fix(game-screen): ios font size

---
 src/App.js                         |   2 +
 src/components/flags/TestLayout.js | 102 +++++++++++++++++++++++++++++
 src/components/flags/styles.css    |  14 ++--
 3 files changed, 111 insertions(+), 7 deletions(-)
 create mode 100644 src/components/flags/TestLayout.js

diff --git a/src/App.js b/src/App.js
index 83064bd..da5bb41 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,6 +23,7 @@ import Flags from "./components/flags/Flags";
 import Home from "./components/home/Home";
 import FlagsApi from "./components/flags/FlagsApi";
 import Profile from "./components/flags/Profile";
+// import TestLayout from "./components/flags/TestLayout";
 
 const store = createStore(appReducers);
 
@@ -34,6 +35,7 @@ function App() {
       <Provider store={store}>
           <Router>
               <Switch>
+                {/*<Route path="/test" component={TestLayout} />*/}
                 <Route path="/flagsapi" component={FlagsApi} />
                 <Route path="/profile" component={Profile} />
                 <Route path="/flags" component={Flags} />
diff --git a/src/components/flags/TestLayout.js b/src/components/flags/TestLayout.js
new file mode 100644
index 0000000..1b66c09
--- /dev/null
+++ b/src/components/flags/TestLayout.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import "./styles.css";
+import Button from 'react-bootstrap/Button';
+import Toast from 'react-bootstrap/Toast';
+import Container from 'react-bootstrap/Container';
+import Alert from 'react-bootstrap/Alert';
+
+const TestLayout = () => {
+    // Mock data
+    const timer = 12;
+    const sessionTimer = 45;
+    const counter = 7;
+    const lifesIcon = '❤️❤️❤️';
+    const ques = 'Germany';
+    const text = 'RIGHT!';
+    const flags = ['🇩🇪', '🇫🇷', '🇮🇹', '🇪🇸'];
+    const paused = false;
+    const lifes = 3;
+
+    return (
+        <div className="game-wrapper">
+            <Container fluid className="game-container">
+                <Toast show={true} className="game-toast">
+                    <Toast.Header closeButton={false}>
+                        <strong className="mr-auto">Question:</strong>
+                    </Toast.Header>
+                    <Toast.Body>
+                        <div style={{
+                            'display': 'flex',
+                            'justifyContent': 'space-between',
+                            'padding': '0 12px',
+                            'alignItems': 'center'
+                        }}>
+                            <span><strong className="question-text">Select the flag of</strong></span>
+                            <span>Time: <strong>{timer}</strong></span>
+                        </div>
+
+                        <h4 style={{
+                            'margin': '10px 10px'
+                        }}>{ques}</h4>
+                        <div className={`flags-container ${paused ? 'paused' : ''}`}>
+                            {flags.map((item, idx) => (
+                                <span key={idx}>
+                                    <span className={'flag'}>{item}</span>
+                                </span>
+                            ))}
+                            {paused && (
+                                <div className="pause-overlay">
+                                    PAUSED
+                                </div>
+                            )}
+                        </div>
+                        <Alert key={'idx'} variant={'warning'} style={lifes <= 0 ? { display: 'block' } : { display: 'none' }}>
+                            <strong>GAME OVER! Your score: {counter}</strong>
+                        </Alert>
+
+                        <div style={{
+                            'display': 'flex',
+                            'justifyContent': 'space-between',
+                            'margin': '10px',
+                            'marginBottom': '0px'
+                        }}>
+                            <div className="feedback-container">
+                                <span className={text.includes('RIGHT') ? 'feedback-correct' : text.includes('NO') ? 'feedback-incorrect' : ''}>
+                                    {text}&nbsp;
+                                </span>
+                            </div>
+                            <span>Total time: {sessionTimer}</span>
+                        </div>
+                        <div style={{
+                            'display': 'flex',
+                            'justifyContent': 'space-between',
+                            'margin': '10px',
+                            'marginTop': '0px'
+                        }}>
+                            <span>{lifesIcon}</span>
+                            <span>Score: <strong>{counter}</strong></span>
+                        </div>
+
+                    </Toast.Body>
+                </Toast>
+
+            </Container>
+            <div className="game-buttons">
+                <Button variant="outline-secondary">
+                    QUIT
+                </Button>
+                <Button variant="outline-secondary">
+                    RESTART
+                </Button>
+                <Button
+                    variant="outline-secondary"
+                    className="btn-pause"
+                >
+                    ❚❚ PAUSE
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+export default TestLayout;
diff --git a/src/components/flags/styles.css b/src/components/flags/styles.css
index e1d42ad..fc3001b 100644
--- a/src/components/flags/styles.css
+++ b/src/components/flags/styles.css
@@ -62,43 +62,43 @@ h1 {
 /* Mobile - use larger size to account for iOS rendering */
 @media (max-width: 520px) {
     .flag {
-        font-size: 69px;
+        font-size: 79px;
     }
 }
 
 @media (max-width: 400px) {
     .flag {
-        font-size: 62px;
+        font-size: 72px;
     }
 }
 
 @media (max-width: 350px) {
     .flag {
-        font-size: 53px;
+        font-size: 73px;
     }
 }
 
 /* iOS Safari specific - uses -webkit-touch-callout which is iOS only */
 @supports (-webkit-touch-callout: none) {
     .flag {
-        font-size: 78px;
+        font-size: 88px;
     }
 
     @media (max-width: 520px) {
         .flag {
-            font-size: 74px;
+            font-size: 84px;
         }
     }
 
     @media (max-width: 400px) {
         .flag {
-            font-size: 67px;
+            font-size: 87px;
         }
     }
 
     @media (max-width: 350px) {
         .flag {
-            font-size: 58px;
+            font-size: 88px;
         }
     }
 }