best UI experience

Author: randomtask2000

src/lib/components/ModelDropdown.svelte

@@ -10,6 +10,8 @@
   import type { ModelInfo } from '$lib/types';
 
   let isDropdownOpen = false;
+  let buttonRef: HTMLButtonElement;
+  let dropdownPosition = { top: 0, left: 0 };
 
   // Filter models for mobile devices
   $: filteredModels = $availableModels.filter((model) => {
@@ -58,6 +60,14 @@
     console.log('Toggle dropdown clicked, current state:', isDropdownOpen);
     isDropdownOpen = !isDropdownOpen;
     console.log('New state:', isDropdownOpen);
+    
+    if (isDropdownOpen && buttonRef) {
+      const rect = buttonRef.getBoundingClientRect();
+      dropdownPosition = {
+        top: rect.bottom + 8,
+        left: rect.right - 448 // 28rem = 448px
+      };
+    }
   }
 
   // Close dropdown when clicking outside
@@ -78,6 +88,7 @@
   class:border-red-500={isDropdownOpen}
 >
   <button
+    bind:this={buttonRef}
     class="btn btn-sm variant-ghost-surface flex items-center space-x-2"
     on:click={() => {
       console.log('Button click event fired');
@@ -96,7 +107,8 @@
 
   {#if isDropdownOpen}
     <div
-      class="absolute top-full right-0 mt-2 w-[28rem] bg-surface-100-800-token border border-surface-300-600-token rounded-lg shadow-xl z-[9999] max-h-[32rem] overflow-y-auto"
+      class="fixed w-[28rem] bg-surface-100-800-token border border-surface-300-600-token rounded-lg shadow-xl max-h-[32rem] overflow-y-auto"
+      style="z-index: 999999 !important; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;"
     >
       <div class="p-4 border-b border-surface-300-600-token">
         <h3 class="font-semibold text-lg text-surface-700-200-token">Select LLM Model</h3>

src/lib/components/RAGContext.svelte

@@ -175,7 +175,9 @@
 {#if featureManager.isEnabled('clientSideRAG')}
   <!-- Debug: RAG Panel is rendering -->
   <div
-    class="fixed top-16 right-0 bg-surface-100-800-token border-l border-surface-300-600-token p-4 w-80 flex flex-col shadow-lg z-40 transition-transform duration-300"
+    class="fixed top-16 right-0 bg-surface-100-800-token border-l 
+    border-surface-300-600-token p-4 w-80 flex flex-col shadow-lg z-1 
+    transition-transform duration-300"
     class:translate-x-0={isVisible}
     class:translate-x-full={!isVisible}
     style="height: calc(100vh - 4rem);"

src/lib/components/ThemeSwitcher.svelte

@@ -3,6 +3,8 @@
   import type { Theme } from '$lib/types';
 
   let isDropdownOpen = false;
+  let buttonRef: HTMLButtonElement;
+  let dropdownPosition = { top: 0, left: 0 };
 
   const themes: { name: Theme; label: string; description: string; preview: string }[] = [
     {
@@ -68,6 +70,14 @@
     console.log('Theme dropdown clicked, current state:', isDropdownOpen);
     isDropdownOpen = !isDropdownOpen;
     console.log('New theme dropdown state:', isDropdownOpen);
+    
+    if (isDropdownOpen && buttonRef) {
+      const rect = buttonRef.getBoundingClientRect();
+      dropdownPosition = {
+        top: rect.bottom + 8,
+        left: rect.right - 320 // 20rem = 320px
+      };
+    }
   }
 
   // Close dropdown when clicking outside
@@ -88,6 +98,7 @@
   class:border-blue-500={isDropdownOpen}
 >
   <button
+    bind:this={buttonRef}
     class="btn btn-sm variant-ghost-surface flex items-center space-x-2"
     on:click={() => {
       console.log('Theme button click event fired');
@@ -111,7 +122,8 @@
 
   {#if isDropdownOpen}
     <div
-      class="absolute top-full right-0 mt-2 w-80 bg-surface-100-800-token border border-surface-300-600-token rounded-lg shadow-xl z-[9999] max-h-96 overflow-y-auto"
+      class="fixed w-80 bg-surface-100-800-token border border-surface-300-600-token rounded-lg shadow-xl max-h-96 overflow-y-auto"
+      style="z-index: 999999 !important; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;"
     >
       <div class="p-4 border-b border-surface-300-600-token">
         <h3 class="font-semibold text-lg text-surface-700-200-token">Choose Theme</h3>