Sync status shouldn't be clickable (#804)

* Sync status shouldn't be clickable

* sync status shouldn't be clickable

options.html

@@ -140,7 +140,7 @@
     <div class="block sync-options">
       <h1 i18n-text="optionsCustomizeSync"></h1>
       <div class="items">
-        <label>
+        <div class="label">
           <span class="sync-status"></span>
           <div class="select-resizer">
             <select class="cloud-name">
@@ -151,7 +151,7 @@
             </select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
-        </label>
+        </div>
         <div class="actions">
           <button type="button" class="connect" i18n-text="optionsSyncConnect"></button>
           <button type="button" class="disconnect" i18n-text="optionsSyncDisconnect"></button>

options/options.css

@@ -80,12 +80,18 @@ h1 {
   width: 70%;
 }
 
-label {
+label,
+.label {
   display: flex;
   margin: .25ex 0;
   align-items: center;
 }
 
+.label {
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
 label > :first-child {
   margin-right: 8px;
   flex-grow: 1;
@@ -319,6 +325,9 @@ html:not(.firefox):not(.opera) #updates {
 }
 
 .sync-status {
+  flex-grow: 1;
+  padding-right: 8px;
+  box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -326,3 +335,7 @@ html:not(.firefox):not(.opera) #updates {
 .sync-status::first-letter {
   text-transform: uppercase;
 }
+
+.sync-options .actions {
+  padding-top: 6px;
+}