UAT: Help panel styling does not match spec (missing #FFFFFF background, drop shadow, and semi-transparent backdrop) #1364

New issue

Open

opened 2026-04-02 16:59:00 +00:00 by freemo · 0 comments

freemo commented

2026-04-02 16:59:00 +00:00

Owner

Bug Report: [tui/help-panel] — Help panel styling does not match spec requirements

Severity Assessment

Impact: Medium. The visual appearance of the help panel deviates significantly from the spec. The panel uses a theme variable ($panel-lighten-1) instead of the required white background, has no drop shadow, and has no semi-transparent backdrop.
Likelihood: 100% reproducible — the styles are hardcoded in the TCSS file.
Priority: Medium

Location

File: src/cleveragents/tui/cleveragents.tcss — #help-panel rule

Description

The spec (§10.2 Help Panel) defines the following appearance requirements:

Appearance: The panel will be a modal dialog that overlays the current view with a dark, semi-transparent backdrop (rgba(0, 0, 0, 0.8)).
The panel itself will have a light background (#FFFFFF), a subtle drop shadow, and rounded corners.

The current TCSS for #help-panel:

#help-panel {
  height: auto;
  max-height: 12;
  padding: 0 1;
  border: round $primary;
  background: $panel-lighten-1;
}

Missing Styling Requirements

Requirement	Spec Value	Actual Value	Status
Background color	`#FFFFFF` (white)	`$panel-lighten-1` (theme variable, not white)	❌ MISSING
Drop shadow	Subtle drop shadow	Not present	❌ MISSING
Semi-transparent backdrop	`rgba(0, 0, 0, 0.8)`	Not present	❌ MISSING
Rounded corners	Yes	`border: round` ✓	✅ PRESENT

Additional Context

The backdrop requirement (rgba(0, 0, 0, 0.8)) is only achievable if the help panel is implemented as a proper modal overlay (see related issue #1361). As an inline Static widget, it is architecturally impossible to add a full-screen semi-transparent backdrop.

In Textual's TCSS, a modal backdrop is typically styled as:

HelpScreen {
  align: center middle;
}

HelpScreen > .dialog {
  background: white;
  border: round $primary;
  box-shadow: 2 2 4 $background;
}

Steps to Reproduce

Open src/cleveragents/tui/cleveragents.tcss
Inspect the #help-panel rule
Note: no #FFFFFF background, no box-shadow, no backdrop styling

Expected Behavior (from spec §10.2)

Panel background: #FFFFFF (white/light)
Panel drop shadow: subtle (e.g., box-shadow: 2 2 4 rgba(0,0,0,0.3))
Backdrop: dark semi-transparent overlay covering the full screen (rgba(0, 0, 0, 0.8))
Rounded corners: ✅ already present

#1361 (UAT: Help panel is an inline Static widget, not a modal overlay as required by spec)
#1356 (UAT: Help panel title is wrong and missing required shortcut categories)

References

Spec §10.2 Help Panel (F1) — "Appearance" subsection
src/cleveragents/tui/cleveragents.tcss — #help-panel rule

## Bug Report: [tui/help-panel] — Help panel styling does not match spec requirements ### Severity Assessment - **Impact**: Medium. The visual appearance of the help panel deviates significantly from the spec. The panel uses a theme variable (`$panel-lighten-1`) instead of the required white background, has no drop shadow, and has no semi-transparent backdrop. - **Likelihood**: 100% reproducible — the styles are hardcoded in the TCSS file. - **Priority**: Medium ### Location - **File**: `src/cleveragents/tui/cleveragents.tcss` — `#help-panel` rule ### Description The spec (§10.2 Help Panel) defines the following appearance requirements: > **Appearance**: The panel will be a modal dialog that overlays the current view with a **dark, semi-transparent backdrop (`rgba(0, 0, 0, 0.8)`)**. > The panel itself will have a **light background (`#FFFFFF`)**, a **subtle drop shadow**, and **rounded corners**. The current TCSS for `#help-panel`: ```css #help-panel { height: auto; max-height: 12; padding: 0 1; border: round $primary; background: $panel-lighten-1; } ``` ### Missing Styling Requirements | Requirement | Spec Value | Actual Value | Status | |---|---|---|---| | Background color | `#FFFFFF` (white) | `$panel-lighten-1` (theme variable, not white) | ❌ MISSING | | Drop shadow | Subtle drop shadow | Not present | ❌ MISSING | | Semi-transparent backdrop | `rgba(0, 0, 0, 0.8)` | Not present | ❌ MISSING | | Rounded corners | Yes | `border: round` ✓ | ✅ PRESENT | ### Additional Context The backdrop requirement (`rgba(0, 0, 0, 0.8)`) is only achievable if the help panel is implemented as a proper modal overlay (see related issue #1361). As an inline `Static` widget, it is architecturally impossible to add a full-screen semi-transparent backdrop. In Textual's TCSS, a modal backdrop is typically styled as: ```css HelpScreen { align: center middle; } HelpScreen > .dialog { background: white; border: round $primary; box-shadow: 2 2 4 $background; } ``` ### Steps to Reproduce 1. Open `src/cleveragents/tui/cleveragents.tcss` 2. Inspect the `#help-panel` rule 3. Note: no `#FFFFFF` background, no `box-shadow`, no backdrop styling ### Expected Behavior (from spec §10.2) - Panel background: `#FFFFFF` (white/light) - Panel drop shadow: subtle (e.g., `box-shadow: 2 2 4 rgba(0,0,0,0.3)`) - Backdrop: dark semi-transparent overlay covering the full screen (`rgba(0, 0, 0, 0.8)`) - Rounded corners: ✅ already present ### Related Issues - #1361 (UAT: Help panel is an inline Static widget, not a modal overlay as required by spec) - #1356 (UAT: Help panel title is wrong and missing required shortcut categories) ### References - Spec §10.2 Help Panel (F1) — "Appearance" subsection - `src/cleveragents/tui/cleveragents.tcss` — `#help-panel` rule

freemo added the

labels

2026-04-02 18:00:39 +00:00

freemo self-assigned this

2026-04-02 18:45:18 +00:00

freemo removed the