fix: landscape modals and iOS PWA support

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.11.2",
+      "version": "1.11.3",
       "dependencies": {
         "fireworks-js": "^2.10.8",
         "flag-icons": "^7.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "homepage": "https://nonograms.7u.pl/",
   "type": "module",
   "scripts": {

src/App.vue

@@ -23,6 +23,7 @@ const canInstall = ref(false);
 const installDismissed = ref(false);
 const isCoarsePointer = ref(false);
 const isStandalone = ref(false);
+const isIos = ref(false);
 const themePreference = ref('system');
 const appVersion = __APP_VERSION__;
 let displayModeMedia = null;
@@ -109,6 +110,7 @@ onMounted(() => {
   }
   if (typeof window !== 'undefined') {
     isCoarsePointer.value = window.matchMedia('(pointer: coarse)').matches;
+    isIos.value = /ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase());
     const storedTheme = typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null;
     if (storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system') {
       themePreference.value = storedTheme;
@@ -160,10 +162,13 @@ onUnmounted(() => {
     />
     <FixedBar />
 
-    <div v-if="canInstall && !installDismissed" class="install-banner">
-      <div class="install-text">{{ t('pwa.installTitle') }}</div>
+    <div v-if="(canInstall || (isIos && !isStandalone)) && !installDismissed" class="install-banner">
+      <div class="install-text">
+        <span v-if="isIos && !isStandalone">{{ t('pwa.installIos') }}</span>
+        <span v-else>{{ t('pwa.installTitle') }}</span>
+      </div>
       <div class="install-actions">
-        <button class="btn-neon secondary install-btn" @click="handleInstall">
+        <button v-if="!isIos" class="btn-neon secondary install-btn" @click="handleInstall">
           {{ installLabel }}
         </button>
         <button class="install-close" @click="installDismissed = true">×</button>

src/components/CustomGameModal.vue

@@ -340,12 +340,20 @@ const confirm = () => {
   text-align: center;
   max-width: 800px;
   width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
   border: 1px solid var(--accent-cyan);
   box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
   animation: slideUp 0.3s ease;
   transition: all 0.3s ease-in-out;
 }
 
+@media (max-width: 768px), (max-height: 600px) {
+  .modal {
+    padding: 20px;
+  }
+}
+
 .modal-content {
     display: flex;
     flex-direction: row;

src/components/WinModal.vue

@@ -215,6 +215,8 @@ onUnmounted(() => {
   width: fit-content;
   max-width: min(92vw, 560px);
   min-width: 280px;
+  max-height: 90vh;
+  overflow-y: auto;
   border: 1px solid var(--primary-accent);
   box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
   animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -223,6 +225,12 @@ onUnmounted(() => {
   overflow-wrap: anywhere;
 }
 
+@media (max-width: 768px), (max-height: 600px) {
+  .modal {
+    padding: 20px;
+  }
+}
+
 h2 {
   font-size: 2.5rem;
   color: var(--primary-accent);

src/composables/useI18n.js

@@ -50,6 +50,7 @@ const messages = {
     'pwa.installTitle': 'Zainstaluj aplikację i graj offline',
     'pwa.installMobile': 'Dodaj do ekranu głównego',
     'pwa.installDesktop': 'Zainstaluj na komputerze',
+    'pwa.installIos': 'Aby zainstalować: kliknij Udostępnij i wybierz "Dodaj do ekranu głównego"',
     'pwa.offlineReady': 'Aplikacja gotowa do pracy offline',
     'pwa.newContent': 'Dostępna nowa wersja, odśwież aby zaktualizować',
     'pwa.reload': 'Odśwież',
@@ -223,6 +224,7 @@ const messages = {
     'pwa.installTitle': 'Install the app and play offline',
     'pwa.installMobile': 'Add to home screen',
     'pwa.installDesktop': 'Install on desktop',
+    'pwa.installIos': 'To install: tap Share and select "Add to Home Screen"',
     'pwa.offlineReady': 'App ready to work offline',
     'pwa.newContent': 'New content available, click on reload button to update',
     'pwa.reload': 'Reload',