ui layout tweaks

src/mol-plugin/skin/base/components/controls-base.scss

@@ -12,6 +12,10 @@
     }
 }
 
+.msp-btn-collapse {
+    padding: 0 $control-spacing / 2;
+}
+
 .msp-btn, .msp-btn:active, .msp-btn-link:focus, .msp-btn:hover {
     outline: none !important;
 }

src/mol-plugin/ui/base.tsx

@@ -84,7 +84,7 @@ export abstract class CollapsableControls<P extends CollapsableProps = Collapsab
 
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block' onClick={this.toggleCollapsed}>
+                <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleCollapsed}>
                     <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
                     {this.state.header}
                 </button>

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

@@ -186,7 +186,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
         const { a, b } = this.getSourceAndTarget();
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>
+                <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleExpanded} title={display.description}>
                     <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
                     {display.name}
                 </button>

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

@@ -91,7 +91,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
         return <div>
             <div className='msp-control-row msp-row-text'>
                 <button className='msp-btn msp-btn-block' onClick={this.focus}>
-                    <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '10px' }} />
+                    <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}
                 </button>
             </div>