From b3d9b8319f30e7d1a8cad42d0772bf6ac6268fad Mon Sep 17 00:00:00 2001
From: Giles Dring <giles@dringtech.com>
Date: Thu, 1 Apr 2021 15:38:44 +0000
Subject: [PATCH] Fix display of canvas on Mobile Safari

Updates #49
---
 public/global.css                 |  2 ++
 src/components/AreaContent.svelte | 24 ++++++++----------------
 src/components/Canvas.svelte      |  5 ++---
 src/components/Editor.svelte      |  5 ++---
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/public/global.css b/public/global.css
index 334b2f9..6336f6f 100644
--- a/public/global.css
+++ b/public/global.css
@@ -74,6 +74,8 @@ button {
 }
 select{
   appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
   background-color: transparent;
   border: none;
   padding: 0 1em 0 0;
diff --git a/src/components/AreaContent.svelte b/src/components/AreaContent.svelte
index 4ad35bd..1f06ebc 100644
--- a/src/components/AreaContent.svelte
+++ b/src/components/AreaContent.svelte
@@ -22,7 +22,7 @@
   {#if focussed}
     <Editor { blobRef } on:resetarea />
   {:else}
-    <p class='description'>
+    <p>
       { description }
     </p>
   {/if}
@@ -33,29 +33,21 @@
     height: 100%;
     color: white;
     font-size: 0.8em;
-    position: fixed;
-    left: 0;
-    right: 0;
+    padding: 0.7em;
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
   }
   section.focussed {
     font-size: 1em;
-    margin: 1em;
+    padding: 1.7em;
     cursor: unset;
-  }
-  h2, .description {
-    padding: 0.7rem;
+    display: block;
   }
   h2 {
     font-weight: bold;
     font-size: 1.4em;
-  }
-  .description {
-    position: absolute;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    bottom: 0;
-    left: 0;
+    flex-grow: 1;
+    padding-bottom: 0.7em;
   }
 </style>
diff --git a/src/components/Canvas.svelte b/src/components/Canvas.svelte
index 8ecdfe9..99a8cc3 100644
--- a/src/components/Canvas.svelte
+++ b/src/components/Canvas.svelte
@@ -146,9 +146,8 @@
     />
     <g transition:fade>
       <foreignObject
-        transform="translate({(height - content.focussed.size) / 2} {(height -
-          content.focussed.size) /
-          2})"
+        x={(height - content.focussed.size) / 2 }
+        y={(height - content.focussed.size) / 2 }
         width={content.focussed.size}
         height={content.focussed.size}
       >
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
index b0ef8d5..3fde9a5 100644
--- a/src/components/Editor.svelte
+++ b/src/components/Editor.svelte
@@ -111,10 +111,9 @@
   section {
     box-sizing: border-box;
     width: 100%;
-    max-height: 90%;
-    padding: 0.7rem;
-    overflow-y: auto;
     font-size: 1.1em;
+    max-height: 95%;
+    overflow-y: auto;
   }
   section :global(.ninety-five) {
     max-width: 95%;