Improved modification menu design

src/app/components/Modification.jsx

@@ -73,11 +73,14 @@ export default class Modification extends TranslatedComponent {
     }
 
     return (
-      <div onBlur={this._updateFinished.bind(this)} className={'cb'} key={name} ref={ modItem => this.props.modItems[name] = modItem }>
-        <div className={'cb'}>{translate(name, m.grp)}</div>
+      <div onBlur={this._updateFinished.bind(this)} key={name}
+        className={cn('cb', 'modification-container')}
+        ref={ modItem => this.props.modItems[name] = modItem }>
+        <span className={'cb'}>{translate(name, m.grp)}</span>
+        <span className={'header-adjuster'}></span>
         <table style={{ width: '100%' }}>
           <tbody>
-            <tr className={'modification-container'}>
+            <tr>
               <td className={'input-container'}>
                 <span>
                   {this.props.editable ?

src/less/slot.less

@@ -38,18 +38,19 @@
   }
 
   .modification-container {
+    @input-container-width: 75%;
     td {
-      width: 35%;
+      width: 100% - @input-container-width;
       text-align: center;
     }
 
     .input-container {
-      width: 65%;
+      width: @input-container-width;
       text-align: right;
     }
 
     input {
-      width: 70%;
+      width: 80%;
     }
 
     .unit-container {
@@ -58,6 +59,11 @@
       text-align: left;
       display: inline-block;
     }
+
+    .header-adjuster {
+      width: 100% - @input-container-width;
+      display: inline-block;
+    }
   }
 
   .cb {