[UI] Layout and alignment after Angular 20 upgrade (Score gauge & Namespace list) #1150
Description
Description:
Following the recent upgrade to Angular 20, we have identified a couple of layout regressions in different components. The issues primarily affect CSS alignment and element sizing.
Environment:
UI Version: 5.5.0-rc2
Bugs Details
Issue 1: Inconsistent sizing of score gauge in Risk Review Tool
- Location: Dashboard -> Risk Review and Improvement Tool (Warning/Completion step)
- Actual Behavior: The projected score gauge (the circular chart on the right showing "42 Fair") is rendered significantly smaller and disproportionate compared to the original score gauge ("46 Fair") on the left.
- Expected Behavior: Both circular gauges should be the exact same size and properly aligned vertically.
- Attachment:
Issue 2: Misaligned text in "Download by Namespace" list
- Location: Dashboard -> "Download by Namespace" dropdown list.
- Actual Behavior: The list of namespaces is erratically aligned. Some items appear to be center-aligned or randomly indented, breaking the visual hierarchy and making it hard to read.
- Expected Behavior: All items in the namespace list should be uniformly left-aligned with consistent padding/margins.
- Attachment:
