fi-prose adds extra space mid text on Firefox

[Kturva]

Package

filament/filament

Package Version

v4.2.0

Laravel Version

v12.37.0

Livewire Version

v3.6.4

PHP Version

PHP 8.4.1

Problem description

When styling a div with <br>s using fi-prose as recommended it adds extra space in the middle of sentences on Firefox.

Expected behavior

It should look more like Chrome's rendition of the same div:

Steps to reproduce

Style a narrow text div with fi-prose, include some <br>s.

git clone https://github.com/Kturva/firefox-line-break
cd firefox-line-break
composer install
npm install
cp .env.example .env
php artisan key:generate
php artisan migrate --force
composer run dev

Reproduction repository (issue will be closed if this is not valid)

https://github.com/Kturva/firefox-line-break

Relevant log output

[danharrin]

Have you had a look at the fi-prose CSS to see what might be causing it?

[Kturva]

Commenting this out seems to fix it, but I'm not sure what breaks if you do do that:

/* filament/support/resources/css/utilities.css 510:513 */
*:where(:not(.fi-not-prose, .fi-not-prose *))
    + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
    margin-top: calc(var(--spacing) * 4);
}

[danharrin]

Try this:

*:where(:not(.fi-not-prose, .fi-not-prose *, br))
  + *:where(:not(.fi-not-prose, .fi-not-prose *, br)) {
  margin-top: calc(var(--spacing) * 4);
}