61 lines
3.7 KiB
Markdown
61 lines
3.7 KiB
Markdown
# 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. |