From 31bc2604b8418894b037c9580da0365389042b85 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 11:02:46 +0200
Subject: [PATCH] Fix iPhone Safari viewport and mobile footer issues

Hero Section Viewport Fix:
- Changed body from min-height to height:100% for proper iOS inheritance
- Updated layout wrapper from min-h-screen to h-full
- Created app.vue with explicit height wrapper for Nuxt root
- Maintains complete height inheritance chain: html > body > #__nuxt > layout

Mobile Footer Fix:
- Fixed CSS conflict: removed grid-template-columns from flex container
- Added proper flex column layout for mobile stacking
- Removed margin-left:auto that was causing horizontal overflow
- Added word-wrap and padding for proper text wrapping
- Centered all footer content on mobile devices

These changes ensure the hero section fills the entire iPhone Safari viewport
including the URL bar area, and the footer displays correctly without cutoff.
---
 apps/website/app.vue                      | 22 ++++++++++++++++++++++
 apps/website/assets/css/main.css          |  4 ++--
 apps/website/assets/css/voyage-layout.css | 23 ++++++++++++++++++++++-
 apps/website/layouts/default.vue          |  2 +-
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 apps/website/app.vue

diff --git a/apps/website/app.vue b/apps/website/app.vue
new file mode 100644
index 0000000..4b8cc33
--- /dev/null
+++ b/apps/website/app.vue
@@ -0,0 +1,22 @@
+<template>
+  <div id="__nuxt-app" class="h-full">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<style>
+#__nuxt-app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ensure Nuxt's root wrapper inherits height */
+#__nuxt {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>
\ No newline at end of file
diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 6351add..d549ce6 100644
--- a/apps/website/assets/css/main.css
+++ b/apps/website/assets/css/main.css
@@ -19,8 +19,8 @@ html {
 body {
   overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
+  height: 100%;
+  height: -webkit-fill-available;
   /* Prevent double-tap zoom on mobile */
   touch-action: manipulation;
   /* Prevent horizontal scrolling */
diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 0b51e87..6505539 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/apps/website/assets/css/voyage-layout.css
@@ -1839,10 +1839,31 @@ html {
     }
 
     .footer-content {
-        grid-template-columns: 1fr;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
         text-align: center;
     }
 
+    .footer-brand {
+        max-width: 100%;
+        margin: 0;
+    }
+
+    .footer-contact {
+        margin-left: 0;
+        width: 100%;
+        text-align: center;
+    }
+
+    .footer-contact p,
+    .footer-brand p {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        padding: 0 1rem;
+    }
+
     /* Fix booking cards for mobile */
     .booking-options {
         grid-template-columns: 1fr;
diff --git a/apps/website/layouts/default.vue b/apps/website/layouts/default.vue
index a8e3d60..5bf95cc 100644
--- a/apps/website/layouts/default.vue
+++ b/apps/website/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full flex flex-col">
     <AppNavbar />
     <main class="flex-grow">
       <slot />