fix(composer): Remove unnecessary zIndex rules, fix wrapping around Cc/Bcc/Subject icons

Previously, we were adding 160px of padding to the entire To field. Now the buttons in the top right are floating inside the container and only impact the first line of participants.

I also stripped out a lot of zIndex rules on the participant fields, subject, body that I think were only necessary because "once you've started adding zindexes you need them everywhere".

Also changed the hover state of the buttons to be consistent.

internal_packages/composer/lib/composer-view.cjsx

@@ -221,29 +221,6 @@ class ComposerView extends React.Component
         {@_renderBodyScrollbar()}
 
         <div className="composer-centered">
-          <div className="composer-participant-actions">
-            <span className="header-action"
-                  style={display: @state.showcc and 'none' or 'inline'}
-                  onClick={@_showAndFocusCc}>Cc</span>
-
-            <span className="header-action"
-                  style={display: @state.showbcc and 'none' or 'inline'}
-                  onClick={@_showAndFocusBcc}>Bcc</span>
-
-            <span className="header-action"
-                  style={display: @state.showsubject and 'none' or 'initial'}
-                  onClick={@_showAndFocusSubject}>Subject</span>
-
-            <span className="header-action"
-                  data-tooltip="Popout composer"
-                  style={{display: ((@props.mode is "fullwindow") and 'none' or 'initial'), paddingLeft: "1.5em"}}
-                  onClick={@_popoutComposer}>
-              <RetinaImg name="composer-popout.png"
-                mode={RetinaImg.Mode.ContentIsMask}
-                style={{position: "relative", top: "-2px"}}/>
-            </span>
-          </div>
-
           {@_renderFields()}
 
           <div className="compose-body" ref="composeBody" onClick={@_onClickComposeBody}>
@@ -263,13 +240,37 @@ class ComposerView extends React.Component
     # If they're hidden, shift-tab between fields breaks.
     fields = []
     fields.push(
-      <ParticipantsTextField
-        ref="textFieldTo"
-        key="to"
-        field='to'
-        change={@_onChangeParticipants}
-        participants={to: @state['to'], cc: @state['cc'], bcc: @state['bcc']}
-        tabIndex='102'/>
+      <div>
+        <div className="composer-participant-actions">
+          <span className="header-action"
+                style={display: @state.showcc and 'none' or 'inline'}
+                onClick={@_showAndFocusCc}>Cc</span>
+
+          <span className="header-action"
+                style={display: @state.showbcc and 'none' or 'inline'}
+                onClick={@_showAndFocusBcc}>Bcc</span>
+
+          <span className="header-action"
+                style={display: @state.showsubject and 'none' or 'initial'}
+                onClick={@_showAndFocusSubject}>Subject</span>
+
+          <span className="header-action"
+                data-tooltip="Popout composer"
+                style={{display: ((@props.mode is "fullwindow") and 'none' or 'initial'), paddingLeft: "1.5em"}}
+                onClick={@_popoutComposer}>
+            <RetinaImg name="composer-popout.png"
+              mode={RetinaImg.Mode.ContentIsMask}
+              style={{position: "relative", top: "-2px"}}/>
+          </span>
+        </div>
+        <ParticipantsTextField
+          ref="textFieldTo"
+          key="to"
+          field='to'
+          change={@_onChangeParticipants}
+          participants={to: @state['to'], cc: @state['cc'], bcc: @state['bcc']}
+          tabIndex='102'/>
+      </div>
     )
 
     if @state.showcc

internal_packages/composer/lib/participants-text-field.cjsx

@@ -35,7 +35,7 @@ class ParticipantsTextField extends React.Component
   render: =>
     classSet = {}
     classSet[@props.field] = true
-    <div className="participants-text-field" style={zIndex: 1000-@props.tabIndex, display: 'inline'}>
+    <div className="participants-text-field">
       <TokenizingTextField
         ref="textField"
         tokens={@props.participants[@props.field]}

internal_packages/composer/stylesheets/composer.less

@@ -39,7 +39,6 @@
 
   .composer-action-bar-wrap {
     position: relative;
-    z-index: 1;
     width: 100%;
     background: transparent;
     border-bottom: 0;
@@ -63,7 +62,6 @@
   }
 
   .composer-content-wrap {
-    z-index: 1;
     padding: 0;
     flex: 1;
     display: flex;
@@ -95,28 +93,24 @@
     padding-left: 1em;
     &:hover {
       color: @text-color-link;
-      cursor: pointer;
+      img.content-mask { background-color: @text-color-link; }
+      cursor: default;
     }
   }
 
   .composer-participant-actions {
-    position: absolute;
-    z-index: 900;
-    right: 23px;
-    .header-action {
-      position: relative;
-      top: 1em;
-    }
-  }
-
-  .tokenizing-field.to {
-    padding-right: 160px;
+    position: relative;
+    float: right;
+    z-index: 2;
+    cursor: default;
+    padding-right: @spacing-standard + @spacing-half;
+    padding-left: @spacing-standard;
+    padding-top: 12px;
   }
 
   input, textarea, div[contenteditable] {
     color: @text-color;
     position: relative;
-    z-index: 1;
     display: block;
     background: inherit;
     width: 100%;
@@ -126,7 +120,6 @@
 
   .compose-subject-wrap {
     position: relative;
-    z-index: 2;
     margin: 0 23px;
     border-bottom: 1px solid @border-color-divider;
     flex-shrink:0;
@@ -160,7 +153,6 @@
 
   .compose-body {
     flex: 1;
-    z-index: 1;
     cursor: text;
     overflow: auto;
     position: relative;
@@ -263,7 +255,6 @@
 //////////////////////////////////
 .participants-text-field {
   position: relative;
-  z-index: 2;
   padding: 5px @spacing-standard 0 @spacing-standard;
   margin: 0 8px;
   flex-shrink: 0;

static/components/tokenizing-text-field.less

@@ -26,6 +26,7 @@
     border-radius: @border-radius-small;
     background-color: @background-color;
     position: absolute;
+    z-index: 2;
   }
 
   .content-container.empty {