1831665 - moz-toggle does not take full width inside of panels

Status: RESOLVED INVALID

(Toolkit :: UI Widgets, defect)

Description

[Mark Striemer [:mstriemer]]

In storybook [1], our display:grid rule is making the toggle take the full width (we limit its container to 400px).

But now that the toggle is being added to the ETP and disable PiP panels, it is not taking the full width of the panel. This means those uses need to provide a style like #my-toggle { width: 100%; } or set the flex/align attributes on its parent to make it size correctly.

Ideally this would just work, we should investigate why it's not taking its full width in panels and find a common solution so we don't need to write so much custom CSS.

[1] https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-toggle--with-description

Comment 1

[Itiel]

(In reply to Mark Striemer [:mstriemer] from comment #0)

Ideally this would just work, we should investigate why it's not taking its full width in panels and find a common solution so we don't need to write so much custom CSS.

The reason is that the parent element is a .panel-footer which uses justify-content: flex-end.

Comment 2

[Itiel]

A potential solution could be to introduce a .panel-footer.aligned-to-end class with justify-content: flex-end and apply it on all current panels except for moz-toggle ones?

Comment 3

[Dão Gottwald [:dao]]

(In reply to Itiel from comment #2)

A potential solution could be to introduce a .panel-footer.aligned-to-end class with justify-content: flex-end and apply it on all current panels except for moz-toggle ones?

Hmm, .panel-footer was intended for buttons. Why does the disable PiP panel use this class in the first place? Only to pick up the margin from https://searchfox.org/mozilla-central/rev/4e6970cd336f1b642c0be6c9b697b4db5f7b6aeb/toolkit/themes/shared/global-shared.css#190-194 ?

In the long run, having buttons in .panel-footer should probably mean that footer should be a moz-button-group, and then we could use that element selector to differentiate -- assuming there is a good reason to support the panel-footer class for things that aren't buttons.

Comment 4

[Mark Striemer [:mstriemer]]

Ah yes, that makes sense. It looks like using a plain vbox in the disable PiP patch actually formats this correctly. If panel-footer is intended for buttons then it probably makes sense to convert all of the uses to moz-button-group and support that within the panel CSS and remove the panel-footer class. I filed bug 1832348 to do that