From 1c1723b4f727a8967b61f3fc779062b9f9d62d81 Mon Sep 17 00:00:00 2001
From: James White <james@jmwhite.co.uk>
Date: Sun, 10 Sep 2017 14:55:03 +0100
Subject: [PATCH] Fixed: Allow toolbar buttons to be full width on x-small and
 small breakpoints (#1972)

---
 src/UI/Activity/Blacklist/BlacklistLayout.js |  1 +
 src/UI/Content/theme.less                    | 10 ++++++++++
 src/UI/Movies/Editor/MovieEditorLayout.js    |  5 +++--
 src/UI/System/Backup/BackupLayout.js         |  2 +-
 src/UI/Wanted/Cutoff/CutoffUnmetLayout.js    |  1 +
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/UI/Activity/Blacklist/BlacklistLayout.js b/src/UI/Activity/Blacklist/BlacklistLayout.js
index c6ca98dab..cc186a5b0 100644
--- a/src/UI/Activity/Blacklist/BlacklistLayout.js
+++ b/src/UI/Activity/Blacklist/BlacklistLayout.js
@@ -80,6 +80,7 @@ module.exports = Marionette.Layout.extend({
         var leftSideButtons = {
             type       : 'default',
             storeState : false,
+            collapse: true,
             items      : [
                 {
                     title   : 'Clear Blacklist',
diff --git a/src/UI/Content/theme.less b/src/UI/Content/theme.less
index ecc5e4962..ba2ef5b41 100644
--- a/src/UI/Content/theme.less
+++ b/src/UI/Content/theme.less
@@ -48,6 +48,16 @@
       display : inline-block;
     }
 
+    @media (max-width: @screen-sm-max) {
+      .x-toolbar-left-1 {
+        display: block;
+      }
+
+      .btn-group {
+        display: block;
+      }
+    }
+
     .sorting-buttons {
       .sorting-title {
         display : inline-block;
diff --git a/src/UI/Movies/Editor/MovieEditorLayout.js b/src/UI/Movies/Editor/MovieEditorLayout.js
index 28d73c7ae..6c72eb481 100644
--- a/src/UI/Movies/Editor/MovieEditorLayout.js
+++ b/src/UI/Movies/Editor/MovieEditorLayout.js
@@ -97,16 +97,17 @@ module.exports = Marionette.Layout.extend({
 		this.leftSideButtons = {
             type       : 'default',
                 storeState : false,
+                collapse: true,
                 items      : [
                 {
-                    title          : 'Update Library',
+                    title          : 'Update library',
                     icon           : 'icon-sonarr-refresh',
                     command        : 'refreshmovie',
                     successMessage : 'Library was updated!',
                     errorMessage   : 'Library update failed!'
                 },
                 {
-                    title : 'Delete Selected',
+                    title : 'Delete selected',
                     icon : 'icon-radarr-delete-white',
                     className: 'btn-danger',
                     callback : this._deleteSelected
diff --git a/src/UI/System/Backup/BackupLayout.js b/src/UI/System/Backup/BackupLayout.js
index c1eb341cd..e612444dd 100644
--- a/src/UI/System/Backup/BackupLayout.js
+++ b/src/UI/System/Backup/BackupLayout.js
@@ -41,7 +41,7 @@ module.exports = Marionette.Layout.extend({
     leftSideButtons : {
         type       : 'default',
         storeState : false,
-        collapse   : false,
+        collapse   : true,
         items      : [
             {
                 title          : 'Backup',
diff --git a/src/UI/Wanted/Cutoff/CutoffUnmetLayout.js b/src/UI/Wanted/Cutoff/CutoffUnmetLayout.js
index e777ba802..1ecd55979 100644
--- a/src/UI/Wanted/Cutoff/CutoffUnmetLayout.js
+++ b/src/UI/Wanted/Cutoff/CutoffUnmetLayout.js
@@ -97,6 +97,7 @@ module.exports = Marionette.Layout.extend({
         var leftSideButtons = {
             type       : 'default',
             storeState : false,
+            collapse: true,
             items      : [
                 {
                     title        : 'Search Selected',