Incorrect display of VM list

[hacketiwack]

Cockpit version: 305-1
Cockpit-podman version: 302-1
Podman version: 4.7.2
OS: Arch Linux
Browser: Safari 17.1

Description
The display of the list of VMs presents broken borders around each elements of the list. See below.

Steps to reproduce

1. Open Cockpit Machines in Safari
2. The list of items is not presented correctly

[garrett]

Note: This is related to cockpit-project/cockpit-podman#1485.

This is a bug in WebKit, and having either zoomed text (especially after a reload after zooming) or HiDPI screens triggers it. This happens using Safari on Macs (which have HiDPI screens by default these days) and also on Linux, with GNOME Web.

• Upstream PatternFly issue: Bug - [Patternfly Table] - [HiDPI (Retina Mac) rendering issue] patternfly/patternfly#5016
• Upstream WebKit issue: https://bugs.webkit.org/show_bug.cgi?id=243167

Hopefully we can find a workaround, either something we can apply locally in the pages or as a PF-level workaround. And hopefully PatternFly itself can work around it (at least for default listings). Ideally, WebKit would just fix the problem and release a new version, as I don't think there's any complete workaround that would really work in all cases (and some cases, we can't really do anything different for alignments other than baseline, depending on the content).

As this was originally reported on 2022-07-25 in the WebKit bug tracking system against Safari 15 (and 17.1 is out now), and WebKit is tied to OS releases (in iOS, macOS, and major versions of WebKitGTK with GNOME), it might be some time before there's a proper fix upstream. Therfore, we should at least investigate some local workarounds, perhaps using different alignments and/or and/or fixing the minimum heights, and/or display types.

This affects Cockpit Client as well, as it is WebKitGTK based.