fix bug, in the middle

spec/bug-fix-1.md

@@ -0,0 +1,61 @@
+# Bug Fixes & UI Polishing Tasks
+
+**Context:**
+We are refining the "LiteRequest" application. The core logic works, but there are specific UI bugs and a functional regression in the Settings module.
+
+**Goal:** Fix visual inconsistencies and ensure the Settings (Font Size/Family) are correctly applied to the CodeMirror editor.
+
+## Task List
+
+### 1. Reorder Tabs in Request Panel
+* **Issue:** The **"Auth"** tab is currently the first tab.
+* **Fix:** Move the **"Auth"** tab to the **last position**.
+* **Order:** `Params` -> `Headers` -> `Body` -> `Auth`.
+* **Action:** Update `RequestPanel.vue` (both the tab navigation list and the conditional rendering of the content).
+
+### 2. Fix Method Dropdown Styling (Dark Mode)
+* **Issue:** The HTML `<select>` dropdown for HTTP Methods shows a white background when expanded, which clashes with the dark theme.
+* **Fix:**
+    * Apply Tailwind classes `bg-slate-900` and `text-white` (or `text-slate-200`) explicitly to the `<option>` tags within the `<select>`.
+    * Ensure the `<select>` itself has `bg-slate-900`, `border-slate-700`, and `text-white`.
+    * *Note:* Browser native dropdowns are hard to style perfectly, but ensuring the background color is set on options fixes the glaring white box issue.
+
+### 3. Fix Editor Background Color Mismatch
+* **Issue:** The CodeMirror editor background is currently a generic gray (likely from a default theme), which looks disconnected from the App's `slate-900` / `slate-950` theme.
+* **Fix:**
+    * In `Editor.vue`, modify the CodeMirror theme configuration.
+    * **Transparent Background:** Set the CodeMirror editor's background to `transparent` so it adopts the parent container's color.
+    * **Code Snippet Hint:**
+      ```javascript
+      EditorView.theme({
+        "&": { backgroundColor: "transparent !important", height: "100%" },
+        ".cm-gutters": { backgroundColor: "transparent !important" } // Match gutter too
+      })
+      ```
+    * Ensure the parent container in `Editor.vue` has the correct Tailwind class (e.g., `bg-slate-900`).
+
+### 4. Fix Font Settings Not Applying
+* **Issue:** Changing Font Size or Family in Settings does not update the Editor view.
+* **Root Cause:** CodeMirror 6 does not automatically react to CSS style changes on the parent container for everything (especially if a Theme is hardcoded).
+* **Fix:**
+    * Update `Editor.vue`.
+    * Use a **Vue `watch` effect** to listen to changes in `settingsStore.editorFontSize` and `settingsStore.editorFontFamily`.
+    * **Implementation Strategy:**
+        * Instead of trying to update the theme, simply apply a reactive `style` object to the **wrapper `<div>`** of the CodeMirror component.
+        * **Crucial Step:** Ensure the CodeMirror theme allows inheritance.
+        * **Alternative (Better):** Re-dispatch a CodeMirror Effect or update the `EditorView` style via a `Compartment` if the wrapper style approach fails.
+        * *Simplified approach for Vue:* Bind `:style="{ fontSize: store.fontSize + 'px', fontFamily: store.fontFamily }"` to the outer div, and ensure the `.cm-editor` CSS allows inheritance (usually it does by default, but confirm standard text styles).
+
+## Implementation Instructions for AI
+
+Please generate the code corrections in the following order:
+
+1.  **`RequestPanel.vue`:** Show the updated template with the reordered Tabs.
+2.  **`RequestPanel.vue` (or wherever the Method Selector is):** Show the CSS/Tailwind fix for the Dropdown and Options.
+3.  **`Editor.vue`:**
+    * Show the updated CodeMirror configuration (making background transparent).
+    * Show the logical fix to apply Font Settings (using `watch` or reactive styles).
+
+---
+**Instruction to AI:**
+Please generate the corrected code blocks for these specific files to resolve the visual bugs and settings regression.