ios: fix inset padding (fix #957)

Signed-off-by: Varun Patil <radialapps@gmail.com>

lib/Controller/PageController.php

@@ -12,7 +12,6 @@ use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\Http\Template\PublicTemplateResponse;
-use OCP\AppFramework\Http\TemplateResponse;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IRequest;
 
@@ -47,7 +46,7 @@ class PageController extends Controller
             \OCP\Util::addTranslations('recognize');
         }
 
-        $response = new TemplateResponse(Application::APPNAME, 'main', self::getMainParams());
+        $response = new TemplateResponsePatch(Application::APPNAME, 'main', self::getMainParams());
         $response->setContentSecurityPolicy(self::getCSP());
         $response->cacheFor(0);
 

lib/Controller/TemplateResponsePatch.php

@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OCA\Memories\Controller;
+
+use OCP\AppFramework\Http\TemplateResponse;
+
+class TemplateResponsePatch extends TemplateResponse
+{
+    public function render()
+    {
+        $content = parent::render();
+
+        // Patch the render response to replace the viewport meta tag
+        return preg_replace(
+            '/<meta\s+name="viewport"\s+content="[^"]*"\s*\/?>/',
+            '<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">',
+            $content,
+        );
+    }
+}

src/components/MobileNav.vue

@@ -45,7 +45,8 @@ export default defineComponent({
 
 <style lang="scss">
 :root {
-  --mobile-nav-height: 58px;
+  // iOS PWA shenanigans
+  --mobile-nav-height: calc(58px + max(calc(env(safe-area-inset-bottom) - 15px), 0px));
 }
 
 // Show correct nav depending on screen size

src/components/SplitTimeline.vue

@@ -252,6 +252,8 @@ export default defineComponent({
 }
 
 @media (max-width: 768px) {
+  $headerHeight: 58px;
+
   /**
    * On mobile the layout works completely differently
    * Both components are full-height, and the separatator
@@ -287,7 +289,7 @@ export default defineComponent({
         height 0.2s ease;
 
       > .timeline-header {
-        height: 58px;
+        height: $headerHeight;
 
         > .swiper {
           display: block;
@@ -315,10 +317,10 @@ export default defineComponent({
     }
 
     &.m-zero > .timeline {
-      top: calc(100% - 58px); // show attribution
+      top: calc(100% - $headerHeight); // show attribution
     }
     &.m-zero > .primary {
-      height: calc(100% - 58px); // show full map
+      height: calc(100% - $headerHeight); // show full map
     }
 
     &.m-one > .timeline {

src/styles/body.scss

@@ -1,5 +1,11 @@
+:root {
+  // https://github.com/nextcloud/server/blob/0cd536786b9df555e2e6110f98b41856f0d51313/core/css/apps.scss#L29
+  --body-height: calc(100% - 50px - var(--body-container-margin));
+}
+
 body {
   overflow: hidden;
+  height: var(--body-height) !important;
 
   * {
     -webkit-tap-highlight-color: transparent;