chore: Adjusted detail page titles for better ux consistency [WD-11696]

[Kxiru]

Done

• Created and adjusted scss classes.

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
   • With a local copy of this branch, build and run as described in the docs.
2. Perform the following QA steps:
   • Verify seamless visual difference between a parent page title and a child page title.

Screenshots

[edlerd]

Demo: https://lxd-ui-803.demos.haus/

[edlerd]

Thanks for the change, this is much better than before.

I found two issues on QA

1. The rename case is duplicating the "/"
   

2. This was broken before, I just realized it now due to focus on the header: The loading behaviour of the instance and profile detail pages render the header briefly without the prefix. This is causing a jump in the UI, maybe we can change the loading behaviour to immediately render with the prefix? Also for invalid instance names we should render the header with prefix, currently the bare name is rendered:

[edlerd]

Thanks for the improvements, I can confirm all previous issues are resolved.

There is something odd with the rename case: The rename form is not correctly positioned

[edlerd]

QA and code looks good, thanks for improving this.

There is one glitch, which existed previously, about spacing. I think adding the suggested classes will fix it: When in a screen with low height and going into the rename mode, previously the height of the header would grow, causing an additional scrollbar to appear. With the changes I am to keep the height unchanged.

[Kxiru]

@edlerd , I added the window.dispatchEvent(new Event("resize")); function to enableRename() as discussed on Mattermost.

[piperdeck]

looking good, nice job on this!

[piperdeck]

LGTM

[edlerd]

LGTM, thanks for improving the headers.