Improve locked category display

public/options/options.css

@@ -317,6 +317,10 @@ input[type='number'] {
     color: grey;
 }
 
+.disabled .slider {
+    cursor: default;
+}
+
 tr.disabled {
     opacity: 0.3;
 }
@@ -358,6 +362,10 @@ tr.disabled {
     padding: 4px;
 }
 
+.switch-label {
+    width: inherit;
+}
+
 .switch {
     position: relative;
     display: inline-block;

src/components/options/CategorySkipOptionsComponent.tsx

@@ -78,9 +78,6 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                     className={`categoryTableElement${extraClasses}`} >
                     <td id={this.props.category + "OptionName"}
                         className="categoryTableLabel">
-                            {disabled &&
-                                <LockSvg className="upsellButton" onClick={() => chrome.tabs.create({url: chrome.runtime.getURL('upsell/index.html')})}/>
-                            }
                             {chrome.i18n.getMessage("category_" + this.props.category)}
                     </td>
 
@@ -93,6 +90,10 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             onChange={this.skipOptionSelected.bind(this)}>
                                 {this.getCategorySkipOptions()}
                         </select>
+
+                        {disabled &&
+                            <LockSvg className="upsellButton" onClick={() => chrome.tabs.create({url: chrome.runtime.getURL('upsell/index.html')})}/>
+                        }
                     </td>
                     
                     {this.props.category !== "chapter" &&
@@ -226,6 +227,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             configKey={option.configKey} 
                             label={option.label}
                             disabled={disabled}
+                            style={{width: "300px"}}
                         />
                     </td>
                 </tr>

src/components/options/ToggleOptionComponent.tsx

@@ -6,6 +6,7 @@ export interface ToggleOptionProps {
     configKey: string;
     label: string;
     disabled?: boolean;
+    style?: React.CSSProperties;
 }
 
 export interface ToggleOptionState {
@@ -26,7 +27,7 @@ class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOpt
     render(): React.ReactElement {
         return (
             <div>
-                <div className="switch-container">
+                <div className="switch-container" style={this.props.style}>
                     <label className="switch">
                         <input id={this.props.configKey} 
                             type="checkbox"