fixed header and footer implemented

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;

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"
     >