Fixed PWA on iOS 27

composer.json

@@ -9,7 +9,7 @@
     ],
     "license": "MIT",
     "require": {
-        "php": "^8.4",
+        "php": "^8.5.12",
         "ext-pdo": "*",
         "inertiajs/inertia-laravel": "^2.0",
         "laravel-notification-channels/webpush": "^11.0",

dockerfile

@@ -1,7 +1,7 @@
-FROM php:8.4-fpm-alpine
+FROM php:8.5-fpm-alpine
 
 RUN apk add --no-cache nginx curl zip unzip git postgresql-dev nodejs npm dcron \
-    && docker-php-ext-install pdo pdo_pgsql pgsql opcache pcntl
+    && docker-php-ext-install pdo pdo_pgsql pgsql pcntl
 
 RUN docker-php-ext-install bcmath
 COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

resources/js/Layouts/MainLayout.vue

@@ -4,23 +4,31 @@ import MainFooter from "@/Components/FlightsGoneBy/MainFooter.vue";
 import Radar from "@/Components/FlightsGoneBy/Radar.vue";
 import StatusNotifications from "@/Components/FlightsGoneBy/StatusNotifications.vue";
 import ToastNotifications from "@/Components/FlightsGoneBy/ToastNotifications.vue";
-import {router, usePage} from "@inertiajs/vue3";
+import { router, usePage } from "@inertiajs/vue3";
 import { ref } from "vue";
 import NotificationListener from "@/Components/FlightsGoneBy/NotificationListener.vue";
-import {SharedProps} from "@/Types/types";
+import { SharedProps } from "@/Types/types";
 import PushNotificationPrompt from "@/Components/PushNotificationPrompt.vue";
 import CopyPageButton from "@/Components/FlightsGoneBy/CopyPageButton.vue";
+
 const transitionKey = ref(0);
 
-const page = usePage<SharedProps>().props
+const page = usePage<SharedProps>().props;
 
-router.on('success', () => {
+router.on("success", () => {
     transitionKey.value++;
 });
 </script>
 
 <template>
     <Radar>
+        <!--
+            A real fixed element at the top edge: Safari tints the status bar
+            with its colour instead of drawing the translucent blur.
+            (Pseudo-elements don't trigger this.)
+        -->
+        <div class="status-bar-backing" aria-hidden="true"></div>
+
         <div class="layoutContainer">
             <MainHeader :key="`header-${transitionKey}`" />
             <Transition name="fade" mode="out-in">
@@ -33,6 +41,7 @@ router.on('success', () => {
             </span>
             <MainFooter :key="`footer-${transitionKey}`" />
         </div>
+
         <NotificationListener v-if="page.auth.user?.id" :user-id="page.auth.user?.id" />
         <StatusNotifications />
         <ToastNotifications />
@@ -41,12 +50,28 @@ router.on('success', () => {
 </template>
 
 <style scoped>
+.status-bar-backing {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: max(10px, env(safe-area-inset-top, 0px));
+    background: var(--surface);
+    z-index: 9999;
+    pointer-events: none;
+}
+
 .layoutContainer {
     display: flex;
     flex-direction: column;
     min-height: 100dvh;
     color: var(--text);
     overflow-y: auto;
+    box-sizing: border-box;
+    /* Push the header below the status bar. If Safari's solid area is taller
+       than the reported inset, add a few px here, e.g. calc(env(...) + 12px). */
+    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 header,
@@ -73,13 +98,18 @@ main {
 }
 
 .footer-share {
-    padding:1em;
+    padding: 1em;
     display: flex;
     justify-content: center;
 }
 
 .fade-enter-from,
-.fade-leave-to { opacity: 0; }
+.fade-leave-to {
+    opacity: 0;
+}
+
 .fade-enter-active,
-.fade-leave-active { transition: opacity 0.2s ease; }
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
 </style>

resources/views/app.blade.php

@@ -2,7 +2,7 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
         <meta name="csrf-token" content="{{ csrf_token() }}">
         <meta name="app-name" content="{{ config('app.name') }}">
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
@@ -16,7 +16,6 @@
         <link rel="apple-touch-icon" href="/img/app_icons/apple-touch-icon-180.png">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-status-bar-style" content="default">
         <meta name="apple-mobile-web-app-title" content="FlightsGoneBy">
         <script defer src="https://stats.dredgy.au/script.js" data-website-id="70a7276c-bdd3-4833-b286-4962ab28b5b5"></script>
         <link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/img/logos/apple-splash-portrait-2048x2732.png">

routes/web.php

@@ -44,6 +44,13 @@ use Inertia\Inertia;
         Route::get('/missing-airlines', [AdminController::class, 'reconcileMissingAirlines'])->name('reconcile-missing-airlines')->middleware('permission:reconcile_missing_liveries');
         Route::post('/ignore-missing-airline', [AdminController::class, 'ignoreMissingAirline'])->name('admin.ignore-missing-airline');
 
+        Route::get('/server-info', function () {
+            return response()->json([
+                'php_version' => PHP_VERSION,
+                'laravel_version' => app()->version(),
+                'environment' => app()->environment(),
+            ]);
+        })->name('server-info');
     });