In particular, the select and input elements aren't properly vertically aligned with their labels.

Things have a moved around a little bit over the week end. I just updated my fx-team repo and here's what I'm seeing. The vertical-alignment of labels is still off a bit. And now the drop-down is a bit too high. Apparently the <div> that contains the "group by", "invert", "stacks" controls is absolutely positioned now, while it was flex before. This seems to make harder to position correctly. I think it would work better in flex. I think it was changed to absolute so that it would start only at var(--sidebar-width) pixels from the left side. I think this would work better: .devtools-toolbar .devtools-button.take-snapshot { -moz-appearance: none; margin-inline-start: 1px; margin-inline-end: calc(var(--sidebar-width) - 32px); } .devtools-toolbar .toolbar-group { display: flex; } .toolbar-group > label { margin-inline-end: 5px; display: flex; align-items: center; }

With the last patch in bug 1213100, here's what the toolbar looks like. It's a little better, but we still need better vertical alignment.

Comment on attachment 8682529 [details] [diff] [review] v1 Review of attachment 8682529 [details] [diff] [review]: ----------------------------------------------------------------- This fixes the alignment issues, thanks! Please update the commit message to be more descriptive of the fix. I keep accidentally selecting the label text when double clicking on a label so maybe we want to do some -moz-user-select magic there, but we could do that in another bug