Fix display of canvas on Mobile Safari

Updates #49
theodi · Apr 1, 2021 · b3d9b83 · b3d9b83
1 parent f4f527c
commit b3d9b83
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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%;