Merge pull request #1375 from keyboardstaff/chat-nav-buttons

feat(ui): reposition chat nav buttons as floating overlay in bottom-right of chat area

Author: nicolasleao

webui/components/chat/input/progress.html

@@ -18,20 +18,6 @@ <h4 id="progress-bar-stop-speech" x-data x-cloak x-show="$store.speech.isSpeakin
                   <span class="icon material-symbols-outlined">volume_off</span>
               </span>
           </h4>
-          <div id="chat-nav-buttons" aria-label="Chat navigation">
-            <button class="btn-icon-action" title="Scroll to top" x-on:click="$store.chatNavigation.scrollToTop()">
-              <span class="material-symbols-outlined">vertical_align_top</span>
-            </button>
-            <button class="btn-icon-action" title="Previous user message" x-on:click="$store.chatNavigation.scrollToPrevUserMessage()">
-              <span class="material-symbols-outlined">keyboard_arrow_up</span>
-            </button>
-            <button class="btn-icon-action" title="Next user message" x-on:click="$store.chatNavigation.scrollToNextUserMessage()">
-              <span class="material-symbols-outlined">keyboard_arrow_down</span>
-            </button>
-            <button class="btn-icon-action" title="Scroll to bottom" x-on:click="$store.chatNavigation.scrollToBottom()">
-              <span class="material-symbols-outlined">vertical_align_bottom</span>
-            </button>
-          </div>
           <x-extension id="chat-nav-after"></x-extension>
         </div>
         <x-extension id="chat-input-progress-end"></x-extension>
@@ -44,11 +30,6 @@ <h4 id="progress-bar-stop-speech" x-data x-cloak x-show="$store.speech.isSpeakin
     #progress-bar-box h4 { margin: 0; }
     #progress-bar-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: auto; margin-right: calc(5.5rem + var(--spacing-xs)); }
     #progress-bar-right > x-extension { display: contents; }
-    #chat-nav-buttons { display: flex; align-items: center; gap: 2px; opacity: 0.85; }
-    #chat-nav-buttons .btn-icon-action { padding: var(--spacing-xs); }
-    #chat-nav-buttons .btn-icon-action {
-      border: none !important;
-    }
     .shiny-text { background: linear-gradient(to right, var(--color-primary-dark) 20%, var(--color-text) 40%, var(--color-text) 60%, var(--color-primary-dark) 60%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 1s linear infinite; }
     @keyframes shine { to { background-position: -200% center; } }
     </style>

webui/index.css

@@ -415,6 +415,48 @@ img {
   transition: margin-left var(--transition-speed) ease-in-out;
 }
 
+/* Chat area wrapper – contains chat-history + floating nav buttons */
+#chat-area-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+/* Chat Navigation Buttons – vertical, floating bottom-right of chat area */
+#chat-nav-buttons {
+  position: absolute;
+  right: var(--spacing-md);
+  bottom: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+#chat-area-wrapper:hover #chat-nav-buttons,
+#chat-nav-buttons:hover {
+  opacity: 0.85;
+  pointer-events: auto;
+}
+#chat-nav-buttons .btn-icon-action {
+  padding: var(--spacing-xs);
+  border: none !important;
+  border-radius: 50%;
+  background: var(--color-panel);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+}
+@media (max-width: 768px) {
+  #chat-nav-buttons {
+    opacity: 0.85;
+    pointer-events: auto;
+  }
+}
+
 /* Scrollbar styles for right panel */
 #right-panel.expanded {
   margin-left: 0;

webui/index.html

@@ -97,7 +97,25 @@
                 <x-component path="welcome/welcome-screen.html"></x-component>
             </div>
             <!-- Message History (actual messages) -->
-            <div id="chat-history" x-data x-show="!$store.welcomeStore || !$store.welcomeStore.isVisible"></div>
+            <div id="chat-area-wrapper" x-data x-show="!$store.welcomeStore || !$store.welcomeStore.isVisible">
+              <div id="chat-history"></div>
+
+              <!-- Chat Navigation Buttons (floating over chat area) -->
+              <div id="chat-nav-buttons" aria-label="Chat navigation" x-cloak>
+                <button class="btn-icon-action" title="Scroll to top" @click="$store.chatNavigation.scrollToTop()">
+                  <span class="material-symbols-outlined">vertical_align_top</span>
+                </button>
+                <button class="btn-icon-action" title="Previous user message" @click="$store.chatNavigation.scrollToPrevUserMessage()">
+                  <span class="material-symbols-outlined">keyboard_arrow_up</span>
+                </button>
+                <button class="btn-icon-action" title="Next user message" @click="$store.chatNavigation.scrollToNextUserMessage()">
+                  <span class="material-symbols-outlined">keyboard_arrow_down</span>
+                </button>
+                <button class="btn-icon-action" title="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
+                  <span class="material-symbols-outlined">vertical_align_bottom</span>
+                </button>
+              </div>
+            </div>
 
             <!-- NEW: Toast Stack Component -->
             <div style="position: relative; height: 0;">