Cog WPE browser not respecting items-center

[hez]

I have a instance of linux running the Cog browser as a kiosk.

We have a few elements on the page in flex boxes with items-center and this appears to work well with modern Safari and Chrome but is failing with Cog, the text gets aligned top in the element instead of in the center.

Photo of the kiosk, with badly aligned text. The navigation menu and the "Furnace" text are examples.

The navigation is pretty simple

    <header class="bg-base-200 px-4 sm:px-6 lg:px-8">
      <nav role="navigation">
        <ul class="flex items-center gap-1 justify-center">
          <li>
            <.link
      navigate="/"
      class="flex items-center gap-2 px-6 pt-4 text-3xl rounded-t-lg transition-colors duration-150 bg-base-100"
      aria-current="page"
    >
      Home
    </.link>
          </li>
          ....

Looking for other ways to achieve similar results, thank you!

[aniruddhaadak80]

@hez Cog/WPE (WebPlatformComponents) uses a specific WebKit port that might have flexbox rendering quirks or older Flexbox spec implementations depending on the version.
If items-center (align-items: center) fails, try:

1. Explicit line-height: leading-none (sometimes text baseline metrics shift in embedded browsers).
2. flex-row explicit.
3. Fallback: display: table (ancient but stable).
   But usually, this is a font-metric issue in restricted environments. Try setting leading-[0] and padding to center it manually if flex fails.