Service kebab menu is cut off by menu

[LunarTwilight]

Explain what happens

1. go to a systemd service (eg /system/services#/test.service)
2. click on the kebab menu next to the name
3. observe the kebab menu is cut off due to it being left aligned (changing it in my dev tools to be right aligned fixes it)

Version of Cockpit

264-1~bpo20.04.1

Where is the problem in Cockpit?

Services

Server operating system

Ubuntu

Server operating system version

20.04.4 LTS

What browsers are you using?

Chrome

System log

No response

[garrett]

Thanks for reporting!

I was able to reproduce this in both Chrome and Firefox with short systemd service names. It's important to note that at least on Fedora, none of the default services have names this short to see this problem.

The menu would be cut off on the right for long names and/or mobile mode if we changed the alignment.

Here's a screenshot in mobile, with a standard name:

I do have a test service and it does happen in mobile also, as the name is so short:

We could fix this for mobile, by always aligning the menu icon to the right. For desktop, it's trickier. A simple, but not correct, approach would be to add a min-width for the text, but then it's going to break like the top screenshot in various languages.

If we combine this with breakpoint alignment in the <Dropdown> component, we could have the position the same on desktop modes and right-aligned in mobile, then have

<Dropdown
  alignments={{
    default: 'right',
    sm: 'left'
  }}
  ...
>

To align it, we would add some CSS, like this, for a mobile-only breakpoint:

.service-top-panel .pf-c-dropdown {
  flex: auto;
  justify-content: end;
}

I think this can be done with PatternFly utilities:

pf-u-flex-grow-on-sm pf-u-justify-content-flex-end-on-sm

End result would look like this in mobile:

And like this on desktop:

[LunarTwilight]

Oh yeah, I forgot that cockpit has a mobile UI whoops. Your solution looks great.

[jelly]

See it here too:

Just create: ~/.config/systemd/user/a.service

[Unit]
Description=a

[Service]
ExecStart=/usr/bin/true

[Install]
WantedBy=default.target

And:

systemctl --user daemon-reload

Note that, the Dropdown component has position=right but that does nothing good for us. Removing that seems to do the right thing for me:

Desktop:

Mobile: