Wonky icon placement on buttons in Safari

PitWenkin commented 8 months ago

Authentic theme version | 21.09.5
Webmin version | 2.105
Usermin version | 2.005
Virtualmin version | 7.9.0

The icons used in multiselect interface (e.g. Backups in Virtualmin) are misplaced in Safari

default

By removing the position: absolute; in the .ui_multi_select_row td:nth-child(2) button:after rule, the icon is correctly placed, an as far as I tested still propperly placed in other browsers

fixed

PitWenkin commented 8 months ago

Similar problem but more extreme positioning.

If the tr including the 'Scheduled backup time' does NOT have the data-column-span="all" attribute, the clock-icon is all over the place.

default

Only if the screensize is changed and the tr receives that attribute the icon is place correctly

body[layout-column="1"] #content .container-fluid [data-column-span="all"][data-column-separator="1"], body[layout-column="1"] #content .container-fluid [data-row-type="ui-table"][data-column-span="all"] {
   column-span: all;
   display: block;
}

Manually adding the attribute to the tr on any screensize which by default would break the icon fixes it too.

As far as I understand the current implementation op column-span this might also be reproducable on Internet Exploer 11 … 😂

iliajie commented 8 months ago

Thanks for the heads up! It was all fixed on the latest commits. You're welcome to give it a try.

webmin / authentic-theme

Wonky icon placement on buttons in Safari #1693