Files

Lukas 3e4f688484 Fix vertical alignment of DNS Mode dropdown in jail config

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.

2026-03-14 09:51:00 +01:00

3.3 KiB

Raw Blame History

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.

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

The bottom edges of the "Date Pattern" dropdown and the "DNS Mode" dropdown must be visually aligned on the same horizontal line.
The fix must not break the responsive layout (on narrow screens the grid collapses to a single column via @media (max-width: 900px)).
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.

3.3 KiB Raw Blame History Unescape Escape