scroll down button overlaps input box when the text is long

Author: azmy60

src/assets/styles/pages/_chat-interface.scss

@@ -17,6 +17,7 @@
     align-items: center;
     width: 100%;
     overflow: auto;
+    position: relative;
 
     >.header {
       display: flex;
@@ -89,8 +90,8 @@
 
   .scroll-down-btn {
     z-index: 1;
-    position: absolute;
-    bottom: 7rem;
+    position: sticky;
+    bottom: 0.5rem;
     left: 50%;
     transform: translateX(-50%);
     min-width: 0;

src/components/ChatInterface.vue

@@ -59,16 +59,15 @@
           <span class="spinner" />
         </div>
       </div>
-      <div ref="bottomMarker"></div>
+      <button
+        v-if="!isAtBottom"
+        @click="scrollToBottom({ smooth: true })"
+        class="btn scroll-down-btn"
+        title="Scroll to bottom"
+      >
+        <span class="material-symbols-outlined">keyboard_arrow_down</span>
+      </button>
     </div>
-    <button
-      v-if="!isAtBottom"
-      @click="scrollToBottom({ smooth: true })"
-      class="btn scroll-down-btn"
-      title="Scroll to bottom"
-    >
-      <span class="material-symbols-outlined">keyboard_arrow_down</span>
-    </button>
     <div class="chat-input-container-container">
       <PromptInput storage-key="inputHistory" :processing="processing" :selected-model="model"
        @select-model="selectModel" @manage-models="$emit('manage-models')" @submit="submit" @stop="stop"  />