UI fixes in Angular

[fmontes]

Parent Issue

#24317

Problem Statement

Fix the list of the UI issues in Angular:

- Make it wider to read the full text. - Check if we can make it to fit the text, maybe using `fit-content`

---

• Make it rounded, external use the md variables
• Internal boxes the sm variable

---

• Use md variable for both
• See if in the top module you can use overflow: hidden and round the wrapper box

---

• Center the lock icon

Steps to Reproduce

N/A

Acceptance Criteria

N/A

dotCMS Version

master

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[fmontes]

Looks good to me... the lock icon could be 0.5px more centered, but is fine.

[wezell]

Needs Work - we are hiding the content type variable names which is really primary information

[zJaaal]

The variable can be seen if you hover in the button, it's showed in a tooltip.

Actually there's a whole redesign of that component in this PR.

It is actually done, but I drafted that PR because I saw the opportunity to refactor an old button that was being used in that component, but is a really old button and it's being used in several places so I'm not sure about that refactor. So I'm waiting for Freddy to evaluate that

[fmontes]

@wezell we're working that in here: #23816

[josemejias11]

Approved QA - Tested on 23.05_f6363d0c_SNAPSHOT // Docker // macOS 13.0 // FF v111.0