fix: widen header resize handle

Author: mtrezza

src/dashboard/Data/Views/Views.react.js

@@ -340,10 +340,15 @@ class Views extends TableView {
 
   renderHeaders() {
     return this.state.order.map(({ name, width }, i) => (
-      <div key={name} className={styles.headerWrap} style={{ width }}>
-        {name}
-        <DragHandle className={styles.handle} onDrag={delta => this.handleResize(i, delta)} />
-      </div>
+      <React.Fragment key={name}>
+        <div className={styles.headerWrap} style={{ width }}>
+          <span className={styles.headerLabel}>{name}</span>
+        </div>
+        <DragHandle
+          className={styles.handle}
+          onDrag={delta => this.handleResize(i, delta)}
+        />
+      </React.Fragment>
     ));
   }
 

src/dashboard/Data/Views/Views.scss

@@ -15,15 +15,21 @@
   position: relative;
   white-space: nowrap;
   overflow: hidden;
+}
+
+.headerLabel {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .handle {
-  position: absolute;
-  top: 0;
-  right: -4px;
+  position: relative;
+  display: inline-block;
   width: 8px;
   height: 30px;
+  margin: 0 -4px;
   cursor: ew-resize;
 }