adress feedback from @luixxiul

- this commit is just to ease review task and will eventually be squashed

app/renderer/components/tabs/content/audioTabIcon.js

@@ -81,6 +81,7 @@ const styles = StyleSheet.create({
 
     overflow: 'hidden',
     margin: '0 -2px 0 2px',
+    zIndex: globalStyles.zindex.zindexTabsAudioTopBorder,
     color: theme.tab.content.icon.audio.color,
     fontSize: '13px',
     height: globalStyles.spacing.iconSize,

app/renderer/components/tabs/tab.js

@@ -55,6 +55,7 @@ class Tab extends React.Component {
     this.onMouseMove = this.onMouseMove.bind(this)
     this.onMouseEnter = this.onMouseEnter.bind(this)
     this.onMouseLeave = this.onMouseLeave.bind(this)
+    this.onDrag = this.onDrag.bind(this)
     this.onDragStart = this.onDragStart.bind(this)
     this.onDragEnd = this.onDragEnd.bind(this)
     this.onDragOver = this.onDragOver.bind(this)
@@ -123,17 +124,20 @@ class Tab extends React.Component {
   onDragStart (e) {
     // showing up the sentinel while dragging leads to show the shadow
     // of the next tab. See 10691#issuecomment-329854096
-    // this is added back when dragEnd event happens
-    this.tabSentinel.style.display = 'none'
+    // this is added back to original size when onDrag event is happening
+    this.tabSentinel.style.width = 0
 
     dnd.onDragStart(dragTypes.TAB, this.frame, e)
     // cancel tab preview while dragging. see #10103
     windowActions.setTabHoverState(this.props.frameKey, false, false)
   }
 
+  onDrag () {
+    // re-enable the tabSentinel while dragging
+    this.tabSentinel.style.width = globalStyles.spacing.sentinelSize
+  }
+
   onDragEnd (e) {
-    // re-enable the tabSentinel after drag ends
-    this.tabSentinel.style.display = 'block'
     dnd.onDragEnd(dragTypes.TAB, this.frame, e)
   }
 
@@ -286,7 +290,7 @@ class Tab extends React.Component {
     })
     const perPageGradient = StyleSheet.create({
       tab_gradient: {
-        '::before': {
+        '::after': {
           background: this.props.gradientColor
         }
       }
@@ -333,6 +337,7 @@ class Tab extends React.Component {
         data-frame-key={this.props.frameKey}
         draggable
         title={this.props.title}
+        onDrag={this.onDrag}
         onDragStart={this.onDragStart}
         onDragEnd={this.onDragEnd}
         onDragOver={this.onDragOver}
@@ -367,28 +372,24 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     color: theme.tab.color,
     display: 'flex',
-    marginTop: '0',
     transition: theme.tab.transition,
-    left: '0',
-    opacity: '1',
     height: '-webkit-fill-available',
     width: '-webkit-fill-available',
     alignItems: 'center',
     justifyContent: 'space-between',
-    padding: 0,
     position: 'relative',
 
     ':hover': {
       background: theme.tab.hover.background
     },
 
     // this enable us to have gradient text
-    '::before': {
+    '::after': {
       zIndex: globalStyles.zindex.zindexTabs,
       content: '""',
       position: 'absolute',
-      top: 0,
-      left: 0,
+      bottom: 0,
+      right: 0,
       width: '-webkit-fill-available',
       height: '-webkit-fill-available'
     }
@@ -414,7 +415,8 @@ const styles = StyleSheet.create({
   },
 
   tab_audioTopBorder: {
-    '::after': {
+    '::before': {
+      zIndex: globalStyles.zindex.zindexTabsAudioTopBorder,
       content: `''`,
       display: 'block',
       position: 'absolute',