fix bug, in the middle

src/components/RequestPanel.vue

@@ -8,14 +8,25 @@ import { invoke } from '@tauri-apps/api/core';
 import { Codemirror } from 'vue-codemirror';
 import { json } from '@codemirror/lang-json';
 import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorView } from '@codemirror/view';
 import { Play, Loader2 } from 'lucide-vue-next';
 
 const store = useRequestStore();
 const settings = useSettingsStore();
-const activeTab = ref('auth'); // Default to auth or params? Spec says "add a new Tab... place it first". I'll set default to 'params' or 'auth'? Usually params is more common, but let's stick to 'params' as default unless user changed it, or maybe the spec implies it's important. I'll leave 'params' as default activeTab for now or switch to 'auth' if requested. Spec doesn't say to make it default active.
+const activeTab = ref('params');
 const isLoading = ref(false);
 
-const extensions = [json(), oneDark];
+const transparentTheme = EditorView.theme({
+  "&": { 
+    backgroundColor: "transparent !important", 
+    height: "100%" 
+  },
+  ".cm-gutters": { 
+    backgroundColor: "transparent !important" 
+  }
+});
+
+const extensions = [json(), oneDark, transparentTheme];
 
 const methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
 
@@ -71,9 +82,9 @@ const executeRequest = async () => {
       <div class="flex-1 flex items-center bg-slate-950 rounded-lg border border-slate-800 focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all overflow-hidden">
         <select 
             v-model="store.activeRequest.method" 
-            class="bg-transparent text-xs font-bold px-3 py-2 text-slate-300 border-r border-slate-800 focus:outline-none hover:bg-slate-900 cursor-pointer uppercase appearance-none"
+            class="bg-slate-900 text-xs font-bold px-3 py-2 text-white border-r border-slate-800 focus:outline-none hover:bg-slate-800 cursor-pointer uppercase appearance-none"
         >
-            <option v-for="m in methods" :key="m" :value="m">{{ m }}</option>
+            <option v-for="m in methods" :key="m" :value="m" class="bg-slate-900 text-white">{{ m }}</option>
         </select>
         <input 
             type="text" 
@@ -97,7 +108,7 @@ const executeRequest = async () => {
     <!-- Configuration Tabs -->
     <div class="flex border-b border-slate-800">
       <button 
-        v-for="tab in ['auth', 'params', 'headers', 'body']" 
+        v-for="tab in ['params', 'headers', 'body', 'auth']" 
         :key="tab"
         @click="activeTab = tab"
         class="px-4 py-2 text-xs font-medium uppercase tracking-wide border-b-2 transition-colors"
@@ -109,11 +120,6 @@ const executeRequest = async () => {
 
     <!-- Content Area -->
     <div class="flex-1 overflow-hidden relative">
-        <KeepAlive>
-            <AuthPanel
-                v-if="activeTab === 'auth'" 
-            />
-        </KeepAlive>
         <KeepAlive>
             <KeyValueEditor 
                 v-if="activeTab === 'params'" 
@@ -141,6 +147,11 @@ const executeRequest = async () => {
                 :extensions="extensions"
             />
         </div>
+        <KeepAlive>
+            <AuthPanel
+                v-if="activeTab === 'auth'" 
+            />
+        </KeepAlive>
     </div>
   </div>
 </template>