Change layout to show the update button separately

Added margin of 3px to any extension action button (more spread buttons).

Author: busykai

src/htmlContent/extension-manager-view-item.html

@@ -51,6 +51,7 @@
         {{/translated}}
     </td>
     <td class="ext-action">
+        <div>
         {{#showInstallButton}}
             <button class="btn btn-mini install" data-extension-id="{{metadata.name}}" {{^allowInstall}}disabled{{/allowInstall}}>
                 {{^isInstalled}}{{Strings.INSTALL}}{{/isInstalled}}
@@ -64,6 +65,9 @@
                 </button>
             {{/showUpdateButton}}
             {{#disablingAllowed}}
+                {{#showUpdateButton}}
+                </div><div>
+                {{/showUpdateButton}}
                 <button class="btn btn-mini disable" data-extension-id="{{metadata.name}}">
                     {{Strings.DISABLE}}
                 </button>
@@ -93,5 +97,6 @@
                 {{Strings.MARKED_FOR_UPDATE}} (<a class="undo-update" data-extension-id="{{metadata.name}}" href="#">{{Strings.UNDO_UPDATE}}</a>)
             {{/isMarkedForUpdate}}
         {{/isInstalled}}
+        </div>
     </td>
 </tr>

src/styles/brackets_patterns_override.less

@@ -1525,6 +1525,7 @@ input[type="color"],
     box-shadow: inset 0 1px @bc-highlight-hard;
     -webkit-font-smoothing: antialiased;
     text-shadow: none;
+    margin: 3px;
 
     .dark & {
         background-color: @dark-bc-btn-bg;
@@ -1650,7 +1651,6 @@ input[type="color"],
         color: @bc-text-alt;
         font-weight: @font-weight-semibold;
         text-shadow: 0 -1px 0 @bc-shadow-small;
-        margin-right: 3px;
 
         .dark & {
             background-color: @dark-bc-secondary-btn-bg;