Icon gets distorted when boxlayout is set to vertical

[charlesg99]

Hello! This is on Ubuntu 20.04, gnome-shell 3.36.1, xorg. When setting the PanelMenu.Button's first child (St.BoxLayout) to vertical, the icon becomes distorted.

Steps to reproduce:

• open the looking glass
• with the picker, select an icon's PanelMenu.Button
• still in the looking glass, run r(0).get_first_child().vertical = true

Not sure why the icon's height (could it be legacy code following the recent refacto 8b8455906f2b126031e5899e2b3e7ce6c247cab7?) is explicitly set to 16px, but removing these assignments (appIndicator.js#L302 and appIndicator.js#L316) fixes the issue, even when changing the scale factor:

With the height assignment removed, scale factor != 1 and the BoxLayout is set to vertical, still works:

There was recently an issue on dash to panel (https://github.com/home-sweet-gnome/dash-to-panel/issues/951) that explains why I think this should be addressed, since I know that during normal usage (default Ubuntu session) it won't affect anything.

Just for a bit of context, when dash to panel is set as vertical, we recursively set to vertical the BoxLayouts in the panel, if their parent's (PanelMenu.Button) preferred natural width is larger than the size of the panel. In the current case, the natural width of the icon's PanelMenu.Button is 50, so when the panel size is set to >= 50, the BoxLayout is set to vertical, which causes the distortion.

Thanks!

[3v1n0]

Thanks for the accurate report, I will look at this better soon.

However, IIRC the this.height setting was still needed to support cases where we have wrong-shaped icons as indicator-multiload (that uses a very wide icon).

Maybe we can still force this using css though, but need to check again