ui tweaks

src/mol-plugin-ui/controls/common.tsx

@@ -241,8 +241,8 @@ export function Button(props: ButtonProps) {
     if (!props.inline) className += ' msp-btn-block';
     if (props.noOverflow) className += ' msp-no-overflow';
     if (props.flex) className += ' msp-flex-item';
-    if (props.className) className += ' ' + props.className;
     if (!props.children) className += ' msp-btn-childless';
+    if (props.className) className += ' ' + props.className;
 
     let style: React.CSSProperties | undefined = void 0;
     if (props.flex) {

src/mol-plugin-ui/skin/base/components/misc.scss

@@ -537,6 +537,13 @@
     }
 }
 
+.msp-btn-apply-simple {
+    text-align: left;
+    .msp-icon {
+        margin-right: 10px;
+    }
+}
+
 @mixin type-class-border($name, $color) {
     .msp-type-class-#{$name} {
         border-left-color: $color;

src/mol-plugin-ui/state/common.tsx

@@ -248,8 +248,9 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
     renderSimple() {
         const info = this.getInfo();
         const canApply = this.canApply();
+
         const apply = <div className='msp-flex-row'>
-            <Button icon={this.props.simpleApply?.icon} title={this.props.simpleApply?.title} disabled={this.state.busy || !canApply} onClick={this.apply} style={{ textAlign: 'left' }}>
+            <Button icon={this.props.simpleApply?.icon} title={this.props.simpleApply?.title} disabled={this.state.busy || !canApply} onClick={this.apply} className='msp-btn-apply-simple'>
                 {this.props.simpleApply?.header}
             </Button>
             {!info.isEmpty && <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleExpanded} isSelected={!this.state.isCollapsed} disabled={this.state.busy} style={{ flex: '0 0 40px', padding: 0 }} />}

src/mol-plugin-ui/structure/measurements.tsx

@@ -171,7 +171,7 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
     render() {
         return <>
             <div className='msp-flex-row'>
-                <ToggleButton icon={Add} label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.state.isBusy} style={{ textAlign: 'left' }} />
+                <ToggleButton icon={Add} label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.state.isBusy} className='msp-btn-apply-simple' />
                 <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
             </div>
             {this.state.action === 'add' && this.add()}