From 1463c1d0f01ca6c8f6f50e5fb63469085c71b522 Mon Sep 17 00:00:00 2001
From: Tenzin Samten <tenzinsamten@Tenzins-MacBook-Pro.local>
Date: Tue, 22 Jun 2021 20:13:46 +0530
Subject: [PATCH 1/2] 1. header hide issue - currently resolved it by fixing
 the header and giving padding for the scroll content

---
 package.json             | 2 +-
 package.json.bak         | 2 +-
 src/assets/css/chat.scss | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b6a7de8..3101fcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.10",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/package.json.bak b/package.json.bak
index 3101fcf..9e39d5b 100644
--- a/package.json.bak
+++ b/package.json.bak
@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.9",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 358b245..b00acc7 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -7,6 +7,7 @@ $admin-fg: white;
     margin: 0;
     padding: 0;
     height: 72px;
+    position: fixed;
     background-color: #ffffff;
     border-bottom: 1px solid #eeeeee;
     .chat-header-row {
@@ -80,6 +81,7 @@ $admin-fg: white;
 
     .chat-content {
         margin: 0;
+        margin-top: 72px;
         padding-top: $chat-standard-padding-s;
         padding-left: $chat-standard-padding-s;
         padding-bottom: $chat-standard-padding-s;

From 6d3b05c9383d5ba84bab529bfaf6d5d7bc69378f Mon Sep 17 00:00:00 2001
From: Tenzin Passang <tenzinpassang@Tenzins-Air.lan>
Date: Wed, 24 Nov 2021 00:27:09 +0200
Subject: [PATCH 2/2] fixed header and footer implemented

---
 src/assets/css/chat.scss | 27 +++++++++++++++++++++++++--
 src/components/Chat.vue  |  4 ++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 024993a..331e0ab 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -1,3 +1,4 @@
+@import '~vuetify/src/styles/settings/_variables.scss';
 @import "@/assets/css/main.scss";
 
 $admin-bg: black;
@@ -28,7 +29,6 @@ $admin-fg: white;
     margin: 0;
     padding: 0;
     height: 72px;
-    position: fixed;
     background-color: #ffffff;
     border-bottom: 1px solid #eeeeee;
     .chat-header-row {
@@ -67,6 +67,11 @@ $admin-fg: white;
         margin-top: $chat-standard-padding-xs;
         margin-bottom: $chat-standard-padding-xs;
     }
+
+    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        position: fixed;
+        z-index: 10;
+    }
 }
 
 .room-list-notification-count {
@@ -107,7 +112,6 @@ $admin-fg: white;
 
     .chat-content {
         margin: 0;
-        margin-top: 72px;
         padding-top: $chat-standard-padding-s;
         padding-left: $chat-standard-padding-s;
         padding-bottom: $chat-standard-padding-s;
@@ -127,6 +131,12 @@ $admin-fg: white;
         &::-webkit-scrollbar-thumb:hover {
             background: #4d4d4d;
         }
+
+        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+            margin-top: 72px;
+            margin-bottom: 70px;
+            z-index: 9;
+        }
     }
 
     .input-area {
@@ -155,6 +165,10 @@ $admin-fg: white;
             background-color: white;
             border: 1px solid #d4d4d4;
             border-radius: 32px;
+
+            @media #{map-get($display-breakpoints, 'sm-and-down')} {
+                margin-bottom: 2px;
+            }
         }
         .input-area-button {
             margin: 0;
@@ -179,6 +193,13 @@ $admin-fg: white;
                 min-height: 20px;
             }
         }
+
+        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+            position: fixed;
+            bottom: 0px;
+            width: 100%;
+            z-index: 10;
+        }
     }
 
     .scroll-to-end {
@@ -695,6 +716,7 @@ $admin-fg: white;
     .chat-header {
         background-color: transparent;
         border: none;
+        position: relative;
     }
 
     .room-avatar {
@@ -817,6 +839,7 @@ $admin-fg: white;
     .chat-header {
         background-color: transparent;
         border: none;
+        position: relative;
     }
     .v-card {
         background-color: white;
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index d6d3db1..80744d3 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-root fill-height d-flex flex-column" ma-0 pa-0>
+  <div class="chat-root fill-height d-flex flex-column">
     <ChatHeader
       class="chat-header flex-grow-0 flex-shrink-0"
       v-on:header-click="onHeaderClick"
@@ -7,7 +7,7 @@
     <div
       class="chat-content flex-grow-1 flex-shrink-1"
       ref="chatContainer"
-      style="overflow-x: hidden; overflow-y: auto"
+      style="overflow: hidden auto;"
       v-on:scroll="onScroll"
       @click="closeContextMenusIfOpen"
     >