Fix several problems with margin and padding on buttons

- Buttons on dialogs were not getting width and height
 - Tooltip buttons were getting standard button spacing when they
   should be closer to their corresponding menu button
 - Several buttons and other elements had containers just to get
   spacing in button sets; rename button-container class to
   button-set-item and apply directly to elements where possible.

js/component/file-actions.js

@@ -41,7 +41,7 @@ let WatchLink = React.createClass({
   },
   render: function() {
     return (
-      <div className="button-container">
+      <div className="button-set-item">
         <Link button="primary" disabled={this.state.loading} label="Watch" icon="icon-play" onClick={this.handleClick} />
         <Modal contentLabel="Not enough credits" isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
           You don't have enough LBRY credits to pay for this stream.
@@ -179,7 +179,7 @@ let FileActionsRow = React.createClass({
         labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
 
       linkBlock = (
-        <div className="faux-button-block file-actions__download-status-bar">
+        <div className="faux-button-block file-actions__download-status-bar button-set-item">
           <div className="faux-button-block file-actions__download-status-bar-overlay" style={{ width: progress + '%' }}>{labelWithIcon}</div>
           {labelWithIcon}
         </div>
@@ -191,8 +191,8 @@ let FileActionsRow = React.createClass({
     return (
       <div>
         {(this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')) ? <WatchLink streamName={this.props.streamName} /> : null}
-        {this.state.fileInfo !== null || this.state.fileInfo.isMine ?
+        {this.state.fileInfo !== null || this.state.fileInfo.isMine
-         <div className="button-container">{linkBlock}</div>
+          ? linkBlock
           : null}
         { showMenu ?
           <DropDownMenu>
@@ -277,14 +277,11 @@ export let FileActions = React.createClass({
         fileInfo || this.state.available || this.state.forceShowActions
           ? <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} />
           : <div>
-              <div className="button-container empty">This file is not currently available.</div>
+              <div className="button-set-item empty">This file is not currently available.</div>
-              <div className="button-container">
+              <ToolTip label="Why?"
-                <ToolTip label="Why?"
+                       body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
-                         body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment." />
+                       className="button-set-item" />
-              </div>
+              <Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} className="button-set-item" />
-              <div className="button-container">
-                <Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} />
-              </div>
             </div>
       }
     </section>);

js/component/link.js

@@ -29,7 +29,7 @@ export let Link = React.createClass({
 
     const className = (this.props.className || '') +
       (!this.props.className && !this.props.button ? 'button-text' : '') + // Non-button links get the same look as text buttons
-      (this.props.button ? 'button-block button-' + this.props.button : '') +
+      (this.props.button ? ' button-block button-' + this.props.button + ' button-set-item' : '') +
       (this.props.disabled ? ' disabled' : '');
 
     let content;

js/component/menu.js

@@ -67,7 +67,7 @@ export let DropDownMenu = React.createClass({
       window.removeEventListener('click', this.handleWindowClick, false);
     }
     return (
-      <div className="button-container">
+      <div className="menu-container">
         <Link ref={(span) => this._menuButton = span} button="text" icon="icon-ellipsis-v" onClick={this.onMenuIconClick} />
         {this.state.menuOpen
           ? <div ref={(div) => this._menuDiv = div} className="menu">

scss/_gui.scss

@@ -144,11 +144,11 @@ input[type="text"], input[type="search"]
   }
 }
 
-.button-container {
+.button-set-item {
   position: relative;
   display: inline-block;
 
-  + .button-container
+  + .button-set-item
   {
     margin-left: $padding-button;
   }

scss/component/_menu.scss

@@ -2,6 +2,10 @@
 
 $border-radius-menu: 2px;
 
+.menu-container {
+  display: inline-block;
+}
+
 .menu {
   position: absolute;
   white-space: nowrap;