Lukas
3e4f688484
Add alignItems: "end" to the fieldRow grid style so that all grid cells align their content to the bottom edge of the row. This ensures the DNS Mode <Select> and the Date Pattern <Combobox> sit on the same horizontal baseline even though Date Pattern carries a hint line that makes it taller. All other fieldRow usages have consistent hint presence across their fields, so no visual regressions are introduced.
52 lines
3.3 KiB
Markdown
52 lines
3.3 KiB
Markdown
# BanGUI — Task List
|
||
|
||
This document breaks the entire BanGUI project into development stages, ordered so that each stage builds on the previous one. Every task is described in prose with enough detail for a developer to begin work. References point to the relevant documentation.
|
||
|
||
---
|
||
|
||
## Task 1 — Fix vertical alignment of "DNS Mode" dropdown with "Date Pattern" dropdown in Jail Configuration ✅ DONE
|
||
|
||
**Status:** Completed — Added `alignItems: "end"` to `fieldRow` in `configStyles.ts`. The two dropdowns now baseline-align to the bottom of their grid row regardless of the "Date Pattern" hint text. Verified no regressions in any other `fieldRow` usages (all other rows have consistent hint presence across their fields).
|
||
|
||
**Component:** `frontend/src/components/config/JailsTab.tsx`
|
||
**Styles:** `frontend/src/components/config/configStyles.ts`
|
||
|
||
### Problem
|
||
|
||
In the jail configuration detail view (`JailConfigDetail`), the "Date Pattern" and "DNS Mode" fields sit side-by-side in a 2-column CSS grid row (class `fieldRow`). The "Date Pattern" `<Field>` has a `hint` prop (`"Leave blank for auto-detect."`) which renders extra text between the label and the input, pushing the `<Combobox>` control downward. The "DNS Mode" `<Field>` has no `hint`, so its `<Select>` control sits higher. This causes the two dropdowns to be vertically misaligned.
|
||
|
||
### Location in code
|
||
|
||
- Around **line 321** of `JailsTab.tsx` there is a `<div className={styles.fieldRow}>` that contains both fields.
|
||
- The "Date Pattern" field (lines ~322–341) uses `<Combobox>` with a `hint` prop.
|
||
- The "DNS Mode" field (lines ~342–353) uses `<Select>` without a `hint` prop.
|
||
|
||
### Acceptance criteria
|
||
|
||
1. The bottom edges of the "Date Pattern" dropdown and the "DNS Mode" dropdown must be visually aligned on the same horizontal line.
|
||
2. The fix must not break the responsive layout (on narrow screens the grid collapses to a single column via `@media (max-width: 900px)`).
|
||
3. No other fields in the jail config form should be affected.
|
||
|
||
### Suggested approach
|
||
|
||
**Option A — Align grid items to the end (preferred):**
|
||
In `configStyles.ts`, add `alignItems: "end"` to the `fieldRow` style. This makes each grid cell align its content to the bottom, so the two inputs line up regardless of whether one field has a hint and the other doesn't. Verify that this does not break other rows that also use `fieldRow` (Backend/Log Encoding row, and any rows in `DefaultsTab.tsx` or `FiltersTab.tsx`).
|
||
|
||
**Option B — Add a matching hint to DNS Mode:**
|
||
Add a `hint` with a non-breaking space (`hint={"\u00A0"}`) to the DNS Mode `<Field>` so it takes up the same vertical space as the Date Pattern hint. This is simpler but slightly hacky.
|
||
|
||
### Files to modify
|
||
|
||
| File | Change |
|
||
|------|--------|
|
||
| `frontend/src/components/config/configStyles.ts` | Add `alignItems: "end"` to `fieldRow` (Option A) |
|
||
| — *or* — | |
|
||
| `frontend/src/components/config/JailsTab.tsx` | Add `hint` to DNS Mode `<Field>` (Option B) |
|
||
|
||
### Testing
|
||
|
||
- Open the app, navigate to **Configuration → Jails**, select any jail.
|
||
- Confirm the "Date Pattern" combobox and "DNS Mode" select are vertically aligned.
|
||
- Resize the browser below 900 px and confirm both fields stack into a single column correctly.
|
||
- Check other config tabs (Defaults, Filters) that reuse `fieldRow` to ensure no regression.
|