From d7e2e739456b25f002cdb6b580ea44397e3354cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Wed, 2 Apr 2025 21:27:11 +0200
Subject: [PATCH] Scroll to chat on mobile (#496)

* WIP: scroll to chat proof of concept on mobile, #381.

* update screen size to 1024px.

* login screen position fixed, #381.

* show chat with a small video on portrait mode.
---
 client/src/app.vue                | 60 ++++++++++++++++++++++++-------
 client/src/components/connect.vue |  2 +-
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/client/src/app.vue b/client/src/app.vue
index 668e7a42..e908ebd1 100644
--- a/client/src/app.vue
+++ b/client/src/app.vue
@@ -119,23 +119,43 @@
     }
   }
 
-  @media only screen and (max-width: 600px) {
-    #neko.expanded {
-      .neko-main {
-        transform: translateX(calc(-100% + 65px));
+  @media only screen and (max-width: 1024px) {
+    html,
+    body {
+      overflow-y: auto !important;
+      width: auto !important;
+      height: auto !important;
+    }
 
-        video {
-          display: none;
-        }
+    body > p {
+      display: none;
+    }
+
+    #neko {
+      position: relative;
+      flex-direction: column;
+      max-height: initial !important;
+
+      .neko-main {
+        height: 100vh;
       }
 
       .neko-menu {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 65px;
-        width: calc(100% - 65px);
+        height: 100vh;
+        width: 100% !important;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 1024px) and (orientation: portrait) {
+    #neko {
+      &.expanded .neko-main {
+        height: 40vh;
+      }
+
+      &.expanded .neko-menu {
+        height: 60vh;
+        width: 100% !important;
       }
     }
   }
@@ -217,6 +237,20 @@
       }
     }
 
+    @Watch('side')
+    onSide(side: boolean) {
+      if (side) {
+        console.log('side enabled')
+        // scroll to the side
+        this.$nextTick(() => {
+          const side = document.querySelector('aside')
+          if (side) {
+            side.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          }
+        })
+      }
+    }
+
     controlAttempt() {
       if (this.shakeKbd || this.$accessor.remote.hosted) return
 
diff --git a/client/src/components/connect.vue b/client/src/components/connect.vue
index 92d04476..fbe35645 100644
--- a/client/src/components/connect.vue
+++ b/client/src/components/connect.vue
@@ -24,7 +24,7 @@
 
 <style lang="scss" scoped>
   .connect {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;