[UI] Multiple layout and rendering bugs observed after Angular 20 upgrade

[leotseng-suse]

Reproducibility: Always
Environment:
Fleet Build Version: 5697
Manager Build Version: 4282

Category 1: Layout & Alignment Issues
Issue 1: Misaligned toggle switches in "Add registry" modal
Steps: Navigate to Assets -> Registries -> Click "Add" to open the "Add registry" modal. Observe the toggle switches at the bottom.
Actual Behavior: The toggles ("Rescan after CVE DB update", "Scan Layers", "Periodic Scan") are vertically misaligned (staggered up and down).
Expected Behavior: All toggle switches and their labels should be aligned on the same horizontal axis.
Attachment Reference:

Issue 2: Broken carousel indicators in Dashboard
Steps: Navigate to Dashboard. Locate the "How to Improve Your Score" widget on the far right.
Actual Behavior: The carousel pagination indicators (dots/bars) at the bottom of the widget are rendering incorrectly with broken styling.
Expected Behavior: The carousel indicators should display as standard, properly proportioned dots.
Attachment Reference:

---

Category 2: Component Rendering & Typography Issues
Issue 3: Data tables are compressed/missing in Image Details modal
Steps: Navigate to Assets -> Registries. Click on a successfully scanned image to open the details modal. Click through the "Vulnerabilities", "Compliance", and "Modules" tabs.
Actual Behavior: The data tables fail to render. The content area is completely compressed or blank, making it impossible to view the scan details.
Expected Behavior: The tables should expand and display the respective data rows correctly.
Attachment Reference:

Issue 4: Oversized empty state text in Registry Overview
Steps: Navigate to Assets -> Registries. Select a scanned image that has 0 vulnerabilities. Scroll down to the bottom detail panel and select the "Overview" tab.
Actual Behavior: The "No vulnerabilities found" text and its accompanying shield icon are rendered in an extremely huge font size.
Expected Behavior: The empty state text should use standard, appropriately sized typography.
Attachment Reference:

[xingzhang-suse]

After fixed

Issue 1:

Issue 2: It is the slide page indicator. The design is changed in Bootstrap 5. It is not a bug

Issue3:

Issue4:

[leotseng-suse]

Hello @xingzhang-suse, may I know which version of the manager can be verified? I deployed the following images to my cluster, but the issue is still the same.

nvpublic/co:jenkins-nv-build-fleet-5702
nvpublic/ma:jenkins-nv-build-manager-4284

[leotseng-suse]

Hi @xingzhang-suse, all issues have been verified and passed with build 4285. However, I found a similar issue on the image detail page. (The text size for "No vulnerabilities" is incorrect.)
Steps:

1. Go to Registries page
2. Scan image (This image should no show any vulnerabilities)
3. Click on image detail
4. Click on Modules

Thank you!