feat(operational-dashboard): soften widget resize handles (HYPERSHELL-348)

[kdoberst]

Summary

• Problem: Operational dashboard widget resize handles use PatternFly's default high-contrast solid wedge, which is visually loud and distracts from the metrics content.

• Fix: Replace the default handle with a smaller gray double-line resize affordance via a custom resizeWidgetConfig and matching CSS.

• Alternatives considered: Restyling only the default PatternFly wedge via CSS (limited control over the solid shape); leaving the default handle unchanged. Custom handle component was preferred for a clearer, softer visual.

Breaking change? No - visual-only change to resize handle styling on the operational dashboard; no API, schema, or behavior changes beyond the handle appearance.

Tracking

Fixes HYPERSHELL-348

Specs and other PRs

Details

• None

Components changed

• packages/operational-dashboard-ui - widget resize handle UI

Changes with impact

• ✅ LOW: Custom resize handle component (two short gray diagonal strokes) wired into the widgetized dashboard via resizeWidgetConfig.
• ✅ LOW: CSS softens handle color/size using PatternFly design tokens so the affordance stays visible but less dominant.

Verification

• • Unit/Integration tests created or updated
• • Error paths considered and addressed
• • Code changes match spec or acceptance criteria
• • Code changes match Jira
• • Manually verify resize still works (drag handle) on dashboard widgets in edit/layout mode
• • Confirm handle appearance on hover in light theme (screenshots to follow)

Screenshots / video

Before

After

Questions and discussion

• None

---

Details

Details

What changed

The PatternFly widgetized dashboard exposes resizeWidgetConfig so consumers can supply a custom resize handle. This PR adds:

1. dashboard-resize-handle.tsx - dashboardResizeHandle renders a 16x16 SVG with two diagonal strokes (currentColor) instead of the default solid wedge, plus dashboardResizeWidgetConfig exporting that handle for PatternFly.
2. operational-dashboard-page.tsx - Passes resizeWidgetConfig={dashboardResizeWidgetConfig} into the dashboard layout component.
3. dashboard-widget.css - Scopes handle color and size under .pf-v6-widget-layout-container using a mix of --pf-t--global--border--color--default and --pf-t--global--text--color--subtle, with an 18px hit target wrapping the 16px SVG.

Out of scope

• No changes to layout persistence, drag behavior, or widget content.
• No backend or BFF changes.

How to test

1. Open the operational dashboard with edit/layout mode enabled so resize handles are shown.
2. Confirm handles render as small gray double-line marks (not solid high-contrast wedges).
3. Drag a handle and confirm widgets still resize as before.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Advanced

Run ID: fb48912c-28cf-4710-870e-184e89381b7d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[amber-review-bot]

Amber review

Status: Complete

View the submitted review.

[amber-review-bot]

Verdict

This is a small, well-scoped visual-only change: it swaps the operational dashboard's high-contrast PatternFly resize wedge for a softer custom double-stroke SVG plus scoped CSS. The mechanics are correct and the earlier accessibility concerns are resolved or author-confirmed; the only remaining note is the absence of an automated render test, which is non-blocking.

Summary: dashboardResizeWidgetConfig is wired into GridLayout via the resizeWidgetConfig prop, and the new CSS grays and resizes the handle while keeping a 24x24 hit target with a 16px inner SVG. Accessibility is the only sensitive dimension for a "soften" change, and it holds up on this head commit.

Findings

No new findings on this head commit. All prior notes are tracked in the Previous concerns section; the sole open item is the missing render test (Minor, non-blocking).

Cross-PR coordination

No material cross-PR coordination issue requires maintainer action.

Previous concerns

• [Major] Softened handle color may fall below the 3:1 non-text contrast minimum (discussion) - cannot verify from code. The handle color is a color-mix() of --pf-t--global--border--color--default (65%) and --pf-t--global--text--color--subtle (35%) at dashboard-widget.css:57-62, both subtle low-contrast tokens, so runtime non-text contrast (WCAG 2.2 SC 1.4.11 / UI-A11Y-05) cannot be proven from the diff. The author reports a manual check passes; I accepted that measurement on the thread and asked only that the measured light/dark ratios be recorded to lock in the guarantee. Not a blocker.
• [Minor] 18px hit target below the 24x24 CSS px minimum (discussion) - addressed. dashboard-widget.css:63-64 now sets the handle container to height: 24px; width: 24px, and dashboard-widget.css:68-70 keeps the inner SVG at 16px, meeting the WCAG 2.5.8 / UI-A11Y-07 24x24 minimum.
• [Minor] No test or automated assertion for the wiring (discussion) - still present. No render test exists under packages/operational-dashboard-ui/src/pages/ for dashboard-resize-handle.tsx. A lightweight test asserting resizeWidgetConfig reaches GridLayout (operational-dashboard-page.tsx:881) and that the two-stroke aria-hidden SVG renders would guard the wiring against a future refactor. I replied on the thread accepting the author's point that a PatternFly prop rename is unlikely; the value is guarding the local wiring, not just the rename. Non-blocking.

Convention Checklist

Convention	Result
PatternFly 6 / reuse canonical components	Pass
Non-text contrast for active controls (UI-A11Y-05)	Verify (author-confirmed)
Target size >= 24x24 CSS px (UI-A11Y-07)	Pass
No em dashes in text files	Pass
Tests added/updated	Fail