paysage

index.html

@@ -14,12 +14,16 @@
         <meta property="og:locale" content="fr_FR" />
         <style>
 body {
+    --vph: "100dvh";
     display: flex;
     flex-direction: column;
-    height: 100dvh;
+    min-height: var(--vph);
 }
 
 @media (min-height: 600px) {
+    body {
+        height: var(--vph);
+    }
     body > header {
         position: sticky;
         top: 0;
@@ -28,6 +32,11 @@ body {
         background: linear-gradient(var(--pico-background-color) 60%, transparent);
         text-shadow: 0 0 10px var(--pico-background-color);
     }
+    
+    body > main {
+        margin: -5rem;
+        padding: 5rem;
+    }
 
     body > footer {
         position: sticky;
@@ -209,7 +218,8 @@ body > main {
             })
 
             function onResize() {
-                footer.style.setProperty("bottom", `${window.innerHeight - window.visualViewport.height}px`);
+                document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
+                conversation.scrollTop = conversation.scrollHeight;
             }
             window.visualViewport?.addEventListener('resize', onResize);
             window.addEventListener('resize', onResize);