Move query visibility icon to left of name

ui/src/shared/components/TimeMachineQueryTab.scss

@@ -4,7 +4,7 @@
   background: $g2-kevlar;
   border-radius: 5px 5px 0 0;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   color: $g10-wolf;
   font-weight: 700;
@@ -29,10 +29,10 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  flex: 1 1 0;
 }
 
-.time-machine-query-tab--close {
+.time-machine-query-tab--close, .time-machine-query-tab--hide {
-  margin-left: 10px;
   margin-bottom: 2px;
   color: $g7-graphite;
 
@@ -40,3 +40,11 @@
     color: $g16-pearl;
   }
 }
+
+.time-machine-query-tab--hide {
+  margin-right: 8px;
+}
+
+.time-machine-query-tab--close {
+  margin-left: 8px;
+}

ui/src/shared/components/TimeMachineQueryTab.tsx

@@ -69,6 +69,7 @@ class TimeMachineQueryTab extends PureComponent<Props, State> {
             className={`time-machine-query-tab ${activeClass}`}
             onClick={this.handleSetActive}
           >
+            {this.showHideButton}
             <TimeMachineQueryTabName
               isActive={isActive}
               name={query.name}
@@ -78,7 +79,6 @@ class TimeMachineQueryTab extends PureComponent<Props, State> {
               onEdit={this.handleEditName}
               onCancelEdit={this.handleCancelEditName}
             />
-            {this.showHideButton}
             {this.removeButton}
           </div>
         </RightClick.Trigger>
@@ -151,7 +151,7 @@ class TimeMachineQueryTab extends PureComponent<Props, State> {
 
     return (
       <div
-        className="time-machine-query-tab--close"
+        className="time-machine-query-tab--hide"
         onClick={this.handleToggleView}
       >
         <span className={`icon ${icon}`} />