some bootstrap styling fixes

Author: caleyg

src/App.js

@@ -297,16 +297,14 @@ class App extends Component {
   }
 
   removePatternFromPlaylist = async (pattern, clickedPlaylistIndex, playlistIndex) => {
-    if (clickedPlaylistIndex !== playlistIndex) {
-      console.log(`removing pattern ${pattern.name} from playlist`)
-      const newTempPlaylist = this.state.playlist.slice()
-      newTempPlaylist.splice(clickedPlaylistIndex, 1)
-      setTimeout(() => {
-        const name = pattern.name
-        this.storePlaylist(name, null, "remove")
-      }, 100)
-      this._launchPlaylistNow()
-    }
+    console.log(`removing pattern ${pattern.name} from playlist`)
+    const newTempPlaylist = this.state.playlist.slice()
+    newTempPlaylist.splice(clickedPlaylistIndex, 1)
+    setTimeout(() => {
+      const name = pattern.name
+      this.storePlaylist(name, null, "remove")
+    }, 100)
+    this._launchPlaylistNow()
   }
 
   _handleAddClick = async (event, pattern) => {
@@ -574,6 +572,7 @@ class App extends Component {
           </div>
       )
     }
+
     return (
         <div className="container">
           <header className="header clearfix">
@@ -590,13 +589,15 @@ class App extends Component {
           <main role="main">
             <hr/>
 
-            <div className="row">
-              <div className="col-lg-12">
-
+            <div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n2">
+              <div className="py-1 col-xl-10 px-xl-2 col-lg-9 px-lg-3 col-md-8 px-md-3 col-6 px-1">
                 <div className="row no-gutters">
                   <h3>Controllers
-                    <button className="btn btn-primary " onClick={this.handleReload} style={{marginLeft:"1em"}}>↻</button>
+                    <button className="btn btn-primary " onClick={this.handleReload} style={{marginLeft:"6px"}}>↻</button>
                   </h3>
+                </div>
+              </div>
+              <div className="py-1 col-xl-1 px-xl-1 col-lg-3 px-lg-5 col-md-4 px-md-5 col-2 px-1">
                   <div className="navbrightness no-learning-ui row no-gutters pull-right">
                     <label>
                       <span role="img" aria-label="light bulb emoji for pixelblaze brightness">💡</span>
@@ -615,8 +616,9 @@ class App extends Component {
                       />
                     </label>
                   </div>
-                </div>
-                <ul className="list-group col-lg-8" id="list">
+              </div>
+              <div className="col-lg-12">
+                <ul className="list-group" id="list">
                   {this.state.discoveries.map(d => {
                     const dName = d.name
                     return (
@@ -638,26 +640,32 @@ class App extends Component {
 
             {cloneDialog}
             {playlistDialog}
-            <h3>
-              Patterns
-              <button
-                  className="btn btn-secondary float-right text-left btn-playlist-bulk"
-                  onClick={(e) => this.openPlaylistDialog(e)}>
-                View Current Playlist
-              </button>
-              <button
-                  className="btn btn-secondary float-right text-left playlist btn-playlist-bulk"
-                  disabled={this.state.deactivateDisableAllButton}
-                  onClick={this.disableAllPatterns}>
-                Disable All
-              </button>
-              <button
-                  className="btn btn-secondary float-right text-left playlist btn-playlist-bulk"
-                  disabled={this.state.deactivateEnableAllButton}
-                  onClick={this.enableAllPatterns}>
-                Enable All
-              </button>
-            </h3>
+            <div className="row mx-xl-n4 mx-n4">
+              <div className="py-1 col-xl-7 px-xl-4 col-3 px-4">
+                <h3>
+                  Patterns
+                </h3>
+              </div>
+              <div className="py-2 col-xl-5 px-xl-5 col-12 px-4">
+                <button
+                    className="btn btn-secondary text-left playlist btn-playlist-bulk"
+                    disabled={this.state.deactivateEnableAllButton}
+                    onClick={this.enableAllPatterns}>
+                  Enable All
+                </button>
+                <button
+                    className="btn btn-secondary text-left playlist btn-playlist-bulk"
+                    disabled={this.state.deactivateDisableAllButton}
+                    onClick={this.disableAllPatterns}>
+                  Disable All
+                </button>
+                <button
+                    className="btn btn-secondary text-left btn-playlist-bulk"
+                    onClick={(e) => this.openPlaylistDialog(e)}>
+                  View Current Playlist
+                </button>
+              </div>
+            </div>
             <div className="list-group">
               {(this.state.isProcessing) &&
                   <div className="loader-container" role="status">