fix: Fixed inconsistent alignment of titles and headings in status panel

[sivasath16]

Fixes #23022

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[sivasath16]

@reggie-k, I've fixed the UI bug. Can you take a look at it?

[surajyadav1108]

It would be better if you could please provide a before and after of the UI changes.

[nitishfy]

I tested it locally.

Before

After

I don't see much of a difference here.

[crenshaw-dev]

The easiest way to test the worst of the alignment issues (the conditions panel) is to intentionally add a typo to the source.repoURL field. I tested with that situation, looks like this PR doesn't yet address that alignment issue.

[linghaoSu]

Some status headers could support buttons to enable more actions. To maintain visual alignment across both cases, I recommend using a fixed row height of 20px and avoiding fractional line heights.

Suggested change

	<div style={{display: 'flex', alignItems: 'center'}}>
	<div style={{display: 'flex', alignItems: 'center', lineHeight: '20px'}}>

I noticed the remaining sectionLabel usages at:

argo-cd/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx

Lines 319 to 330 in 5684a19

	<div className='application-status-panel__item' style={{position: 'relative'}}>
	{sectionLabel({
	title: 'SYNC WINDOWS',
	helpContent:
	'The aggregate state of sync windows for this app. ' +
	'Red: no syncs allowed. ' +
	'Yellow: manual syncs allowed. ' +
	'Green: all syncs allowed'
	})}
	<div className='application-status-panel__item-value' style={{margin: 'auto 0'}}>
	<ApplicationSyncWindowStatusIcon project={application.spec.project} state={data} />
	</div>

argo-cd/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx

Lines 170 to 175 in 5684a19

	<div style={{lineHeight: '19.5px', marginBottom: '0.3em'}}>
	{sectionLabel({
	title: 'SOURCE HYDRATOR',
	helpContent: 'The source hydrator reads manifests from git, hydrates (renders) them, and pushes them to a different location in git.'
	})}
	</div>

Also, there's an unusual marginTop defined in application-status-panel.scss, which I'd suggest removing to simplify the layout.

[linghaoSu]

Additionally, for the application-status-panel__item-value className, I recommend constraining its layout using a min-height rather than fixed heights. Since this element is based on a flex layout, using a consistent height will ensure vertical alignment across items. From experiments, a min-height: 40px works well for most cases, except for appConditions, which includes multiple status labels and may require special handling.

To fine-tune the alignment, I suggest adding margin-top: 1px; around this line (L50)

argo-cd/ui/src/app/applications/components/application-status-panel/application-status-panel.scss

Line 50 in 5684a19

margin-right: 12px;

, and adding vertical-align: middle; at this line (L190)

argo-cd/ui/src/app/applications/components/application-status-panel/application-status-panel.scss

Line 190 in 5684a19

border: 1px solid $argo-color-gray-5;

to ensure the status icon in the conditions section is vertically aligned with the text.

Also, I recommend removing the line margin: auto;

argo-cd/ui/src/app/applications/components/application-status-panel/application-status-panel.scss

Line 44 in 5684a19

margin: auto;

, as it causes vertical misalignment due to its effect on the element's positioning within flex containers.

With these adjustments, we should be able to achieve a more consistent and visually aligned layout.

For comparison, here's a screenshot of the previous layout before these adjustments: