fix(ui): overlapping UI elements and add resource units to tooltips (cherry-pick #24717 for 3.2)

[choejwoo]

Hello, @rumstead @mkilchhofer. I saw that a cherry-pick to 3.2 was planned in #24717 , so I created a cherry-pick PR for it.
Since I originally worked on this change and the conflict resolution required multiple steps, I resolved the conflicts myself and prepared the cherry-pick PR.
Please take a look when you have a chance!
Thank you!

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 Title of the PR
• 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).