[UI] Layout and alignment after Angular 20 upgrade (Score gauge & Namespace list)

[leotseng-suse]

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:

[xingzhang-suse]

After fixed