# 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.