[Bug] Repeatable buttons look weird in Firefox (MacOS)

[taenzerme]

Bug report

What I did

Created a simple repeatable field.

What I expected to happen

The buttons to look as neat as in Chrome ;-)

What happened

Buttons look like this in Firefox on MacOS:

What I've already tried to fix it

Nothing so far as I assume this to be a general bug that is also present in the current demo:

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there?

Yes

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

PHP VERSION:

PHP 8.2.15 (cli) (built: Jan 19 2024 00:15:08) (NTS) Copyright (c) The PHP Group Zend Engine v4.2.15, Copyright (c) Zend Technologies with Zend OPcache v8.2.15, Copyright (c), by Zend Technologies

LARAVEL VERSION:

10.44.0.0

BACKPACK PACKAGE VERSIONS:

backpack/basset: 1.2.2 backpack/crud: 6.6.3 backpack/devtools: 2.0.3 backpack/generators: v4.0.3 backpack/logmanager: v5.0.1 backpack/permissionmanager: 7.1.1 backpack/pro: 2.1.5 backpack/revise-operation: 2.0.0 backpack/theme-coreuiv2: 1.2.3 backpack/theme-tabler: 1.2.0

[taenzerme]

It appears the border-width property works differently in FF as it does in Chrome and inherits different values. Also, line-height seems to do weird stuff when not defined explicitly in FF.

[taenzerme]

        .container-repeatable-elements .controls button {
          height: 1.5rem;
          width: 1.5rem;
          border-radius: 50%;
          margin-bottom: 2px;
          overflow: hidden;
          border-width: 0;
        }

in backpack/pro/resources/views/fields/repeatable.blade.php does seem to fix this.

[karandatwani92]

Hey @taenzerme

You made me download Firefox on my mac 🫣

It seems OK on my Mac:

macOS Sonoma 14.2.1 (23C71) Firefox 123.0

[taenzerme]

Hey @karandatwani92 ,

thanks for the feedback!

This is how the online demo and our latest deployments look (no changes to the views or CSS):

Your screenshot doesn't look like it's supposed to look. The circles around the buttons are missing.

This is how it's supposed to look:

[karandatwani92]

Ok, the problem is with the relationship field. I previously checked the repeatable field as you were suggesting a fix on backpack/pro/resources/views/fields/repeatable.blade.php

Thanks @taenzerme for putting our attention to the details.

[taenzerme]

@karandatwani92 Sorry, I mixed up the files. Sorry, I meant the relationship field.

[karandatwani92]

Hey @taenzerme Thanks for reporting the bug with its fix.

I've submitted a PR here for it and closing this one. You can follow the updates there.

Thanks