height stuff for ios

src/components/Nav.svelte

@@ -21,7 +21,7 @@
     padding-top: env(safe-area-inset-top);
     padding-bottom: env(safe-area-inset-bottom);
     width: 3em;
-    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    height: 100%;
     background-color: var(--clr-primary);
     display: flex;
     flex-direction: column;

src/components/PostAttributes.svelte

@@ -9,8 +9,6 @@
     return dj(date).format('MMM D, YYYY')
   }
 
-  $: console.log(post)
-
   $: created = format(post.date)
   $: modified = format(post.modified)
 </script>

src/routes/_layout.svelte

@@ -1,13 +1,21 @@
 <script>
+  import { onMount } from 'svelte'
+
   import Nav from '../components/Nav.svelte'
 
   export let segment
+  let wrapper
+
+  onMount(() => {
+    wrapper.style.height = `${window.innerHeight}px`
+  })
 </script>
 
 <style>
   div {
     display: flex;
     flex-direction: row;
+    height: 100vh;
   }
 
   main {
@@ -18,7 +26,7 @@
     flex: 1 0 auto;
     overflow: auto;
     max-width: calc(100% - 4em);
-    max-height: 100vh;
+    height: 100%;
   }
 
   @media (max-width: 30em) {
@@ -28,7 +36,7 @@
   }
 </style>
 
-<div>
+<div bind:this={wrapper}>
   <Nav {segment} />
   <main>
     <slot />

static/global.css

@@ -2,6 +2,7 @@
 
 * {
   box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
 }
 
 :root {