CSS oveflow: hidden related fixes

src/mol-plugin-ui/controls/action-menu.tsx

@@ -167,7 +167,7 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         const { header, hasCurrent } = this.state;
 
         return <div className='msp-control-group-header msp-flex-row' style={{ marginTop: '1px' }}>
-            <button className='msp-btn msp-form-control msp-flex-item' onClick={this.toggleExpanded}>
+            <button className='msp-btn msp-form-control msp-flex-item msp-no-overflow' onClick={this.toggleExpanded}>
                 <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                 {hasCurrent ? <b>{header?.label}</b> : header?.label}
             </button>
@@ -219,7 +219,7 @@ const Action: React.FC<{
     multiselect: boolean | undefined, 
     current: ActionMenu.Item | undefined }> = ({ item, onSelect, current, multiselect }) => {
     const isCurrent = current === item;
-    return  <button className='msp-btn msp-btn-block msp-form-control msp-action-menu-button' onClick={() => onSelect(multiselect ? [item] : item as any)} disabled={item.disabled}>
+    return  <button className='msp-btn msp-btn-block msp-form-control msp-action-menu-button msp-no-overflow' onClick={() => onSelect(multiselect ? [item] : item as any)} disabled={item.disabled}>
         {item.icon && <Icon name={item.icon} />}
         {isCurrent || item.selected ? <b>{item.label}</b> : item.label}
     </button>;

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

@@ -4,8 +4,6 @@
     border: none;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
     &[disabled] {
         background: $default-background;

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

@@ -193,4 +193,9 @@
 .msp-shape-empty {
     fill: none;
     stroke: $font-color;
+}
+
+.msp-no-overflow {    
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

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

@@ -290,7 +290,7 @@ class MeasurementEntry extends PurePluginUIComponent<{ cell: StructureMeasuremen
 
         return <>
             <div className='msp-btn-row-group' key={obj.id} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight}>
-                <button className='msp-btn msp-btn-block msp-form-control' title='Click to focus. Hover to highlight.' onClick={this.focus} style={{ width: 'auto', textAlign: 'left' }}>
+                <button className='msp-btn msp-btn-block msp-form-control msp-no-overflow' title='Click to focus. Hover to highlight.' onClick={this.focus} style={{ width: 'auto', textAlign: 'left' }}>
                     <span dangerouslySetInnerHTML={{ __html: this.label }} />
                 </button>
                 <IconButton small={true} customClass='msp-form-control' onClick={this.toggleVisibility} icon='eye' style={{ flex: '0 0 32px' }} title={cell.state.isHidden ? 'Show' : 'Hide'} toggleState={!cell.state.isHidden} />

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

@@ -159,7 +159,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
             <ParameterControls params={StructureSelectionParams} values={this.values} onChangeValues={this.setProps} />
             {this.controls}
             <div className='msp-control-row msp-row-text' style={{ marginTop: '6px' }}>
-                <button className='msp-btn msp-btn-block' onClick={this.focus} title='Click to Focus Selection' disabled={empty}>
+                <button className='msp-btn msp-btn-block msp-no-overflow' onClick={this.focus} title='Click to Focus Selection' disabled={empty}>
                     <Icon name='focus-on-visual' style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}
                 </button>

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

@@ -251,7 +251,7 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         const label = this.label;
         return <>
             <div className='msp-btn-row-group' style={{ marginTop: '1px' }}>
-                <button className='msp-btn msp-form-control msp-flex-item' onClick={this.toggleHierarchy} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} disabled={disabled} title={label}>
+                <button className='msp-btn msp-form-control msp-flex-item msp-no-overflow' onClick={this.toggleHierarchy} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} disabled={disabled} title={label}>
                     {label}
                 </button>
                 {actions.length > 0 && <IconButton customClass='msp-form-control' style={{ flex: '0 0 32px' }} onClick={this.toggleActions} icon='dot-3' title='Actions' toggleState={this.state.show === 'actions'} disabled={disabled} />}