FIX Padding and scrolling around detail views is now consistent

As well, component class names are updated to use BEM conventions and reduce
CSS nesting levels

client/src/components/HistoryViewer/HistoryViewer.scss

@@ -12,6 +12,11 @@
   cursor: pointer;
 }
 
+// In detail views, pulls the content (and content tabs) closer to the selected version table
+.history-viewer__table--current {
+  margin-bottom: $panel-padding-y / 2;
+}
+
 // Used in conjunction with .panel--padded, removes top and bottom padding
 .panel--padded-side {
   padding-bottom: 0;
@@ -38,12 +43,6 @@
   }
 }
 
-.history-viewer__table--compare {
-  margin-left: 0;
-  margin-right: 0;
-  min-width: 100%;
-}
-
 .history-viewer__version-detail--compare {
   margin-left: $panel-padding-x;
   margin-right: $panel-padding-x;
@@ -133,37 +132,32 @@
   }
 }
 
-.history-viewer__heading {
-  .author-compare-toggle__container {
-    display: flex;
-
-    .author-span {
-      align-self: flex-end;
-    }
-
-    .compare-dropdown {
-      margin-left: auto;
+// Don't let the actions column take up an equal portion of the calculated table width,
+// and ensure that its height doesn't push out the heading
+.table th.history-viewer-heading__toggle {
+  width: 1%;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  text-align: right;
+}
 
-      button {
-        &::before {
-          margin-right: 0;
-        }
-      }
+// Labels are capitalised by default
+.history-viewer-heading__toggle-dropdown .form-check-label {
+  text-transform: none;
+}
 
-      &.show {
-        .dropdown-menu {
-          min-width: 14rem;
-        }
-      }
+.history-viewer-heading__toggle-dropdown {
+  .btn[class*=font-icon-]:before {
+    margin-right: 0;
+  }
 
-      .form-check {
-        margin-top: .5rem;
-      }
-    }
+  &.show .dropdown-menu {
+    min-width: 14rem;
+  }
 
-    .form-check-label {
-      text-transform: none;
-    }
+  .form-check {
+    margin-top: .5rem;
   }
 }
 

client/src/components/HistoryViewer/HistoryViewerHeading.js

@@ -39,22 +39,20 @@ class HistoryViewerHeading extends Component {
       <tr className="history-viewer__heading">
         <th>#</th>
         <th>{i18n._t('HistoryViewer.Record', 'Record')}</th>
-        <th>
-          <span className="author-span">{i18n._t('HistoryViewer.Author', 'Author')}</span>
-        </th>
-        <th className="author-compare-toggle__container">
+        <th>{i18n._t('HistoryViewer.Author', 'Author')}</th>
+        <th className="history-viewer-heading__toggle">
           <Dropdown
             isOpen={dropdownOpen}
             toggle={this.toggle}
-            className="compare-dropdown"
+            className="history-viewer-heading__toggle-dropdown"
           >
             <DropdownToggle className="font-icon-sliders" />
             <DropdownMenu right>
               <div className="form-check">
                 <input
                   id="history-viewer-compare-two"
                   type="checkbox"
-                  className="no-change-track compare-mode__checkbox"
+                  className="no-change-track history-viewer-heading__compare-mode-checkbox"
                   checked={compareModeSelected}
                   onChange={this.handleCompareModeChange}
                 />

client/src/components/HistoryViewer/HistoryViewerVersionDetail.js

@@ -122,17 +122,28 @@ class HistoryViewerVersionDetail extends PureComponent {
   render() {
     const { ListComponent, schemaUrl, CompareWarningComponent } = this.props;
 
-    const containerClasses = this.isPreviewable() ? 'panel panel--padded panel--padded-side panel--scrollable' : '';
-
-    const extraListClasses = classnames({ 'history-viewer__table--compare': this.isCompareMode() }, 'history-viewer__table--current');
-    const formClasses = classnames({ 'history-viewer__version-detail--compare': this.isCompareMode() }, 'history-viewer__version-detail');
+    const containerClasses = [
+      'flexbox-area-grow',
+      'panel',
+      'panel--scrollable',
+      'panel--padded',
+      'panel--padded-side',
+    ];
+    const extraListClasses = {
+      'history-viewer__table--current': true,
+      'history-viewer__table--compare': this.isCompareMode(),
+    };
+    const formClasses = {
+      'history-viewer__version-detail': true,
+      'history-viewer__version-detail--compare': this.isCompareMode(),
+    };
 
     return (
       <div className="flexbox-area-grow fill-width">
         <div className="flexbox-area-grow fill-height">
-          <div className={classnames(containerClasses, 'flexbox-area-grow')}>
+          <div className={classnames(containerClasses)}>
             <ListComponent
-              extraClass={extraListClasses}
+              extraClass={classnames(extraListClasses)}
               isActive
               versions={this.getListVersions()}
             />

client/src/components/HistoryViewer/tests/HistoryViewerHeading-test.js

@@ -24,7 +24,7 @@ describe('HistoryViewerHeading', () => {
       );
 
       it('should dispatch an action to disable the compare mode', () => {
-        wrapper.find('.compare-mode__checkbox').at(0).simulate('change');
+        wrapper.find('.history-viewer-heading__compare-mode-checkbox').at(0).simulate('change');
         expect(mockOnCompareModeUnselect).toHaveBeenCalled();
       });
     });
@@ -39,7 +39,7 @@ describe('HistoryViewerHeading', () => {
       );
 
       it('should dispatch an action to enable the compare mode', () => {
-        wrapper.find('.compare-mode__checkbox').at(0).simulate('change');
+        wrapper.find('.history-viewer-heading__compare-mode-checkbox').at(0).simulate('change');
         expect(mockOnCompareModeSelect).toHaveBeenCalled();
       });
     });