Form page shadow doesn't extend past header

[deboer-tim]

Bug description

The shadow that should extend down the full left column is only in the header for form pages, including Help, Troubleshooting, Build, etc.

Including screen cap from light mode as it is much more obvious:

Operating system

macOS 14.5

Installation Method

None

Version

next (development version)

Steps to reproduce

No response

Relevant log output

No response

Additional context

No response

[axel7083]

After some investigation, the problem is that the shadown is created by the parent component here FormPage.svelte.

podman-desktop/packages/ui/src/lib/layouts/FormPage.svelte

Line 37 in f25dc1b

<div class="flex flex-col w-full h-full shadow-pageheader">

But lower in the hierarchy, it define the background color, overlapping the shadow

podman-desktop/packages/ui/src/lib/layouts/FormPage.svelte

Line 82 in f25dc1b

<div class="flex w-full h-full bg-[var(--pd-content-bg)] overflow-auto">

Possible solution

Absolute shadow

We could add <div class="z-50 shadow-pageheader w-full h-full absolute"/> inside the FormPage, which would create a shadown overlay, solving the problem.

Make the FormPage background the same as the content

We seems to already use the same color for the header and content, let's define it next to the shadown.

Same result

cc @feloy @deboer-tim

[deboer-tim]

These used to have different colors for header and content, which is probably why there was a distinction so we didn't notice this issue. @ekidneyrh changed to use a single color in forms when @feloy was implementing light mode here, so my preference is the last option. I think we need to remove the 1px horizontal line too, it just looks out of place now.