From eaf0e65608a8882e0b915777aeaa4f07cf44fe4a Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 13 Mar 2014 22:05:33 -0400
Subject: [PATCH] reduce text on filter buttons

---
 dashboard-ui/collections.html       |  8 ++++----
 dashboard-ui/css/librarybrowser.css | 21 ++++++++-------------
 dashboard-ui/episodes.html          |  8 ++++----
 dashboard-ui/gamegenres.html        |  6 +++---
 dashboard-ui/games.html             |  8 ++++----
 dashboard-ui/gamestudios.html       |  6 +++---
 dashboard-ui/itemlist.html          |  6 ++++--
 dashboard-ui/moviegenres.html       |  6 +++---
 dashboard-ui/moviepeople.html       |  6 +++---
 dashboard-ui/movies.html            |  6 ++++--
 dashboard-ui/moviestudios.html      |  6 +++---
 dashboard-ui/movietrailers.html     |  8 ++++----
 dashboard-ui/musicalbumartists.html |  6 +++---
 dashboard-ui/musicalbums.html       |  6 ++++--
 dashboard-ui/musicartists.html      |  6 +++---
 dashboard-ui/musicgenres.html       |  6 +++---
 dashboard-ui/musicvideos.html       |  8 ++++----
 dashboard-ui/songs.html             |  8 ++++----
 dashboard-ui/tvgenres.html          |  6 +++---
 dashboard-ui/tvpeople.html          |  6 +++---
 dashboard-ui/tvshows.html           |  6 ++++--
 dashboard-ui/tvstudios.html         |  6 +++---
 22 files changed, 81 insertions(+), 78 deletions(-)

diff --git a/dashboard-ui/collections.html b/dashboard-ui/collections.html
index 9e10d5d7e6..f4c99aaaca 100644
--- a/dashboard-ui/collections.html
+++ b/dashboard-ui/collections.html
@@ -10,12 +10,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <button id="btnNewCollection" data-mini="true" data-icon="plus" data-inline="true" class="hide">New</button>
                 <div class="viewSummary"></div>
             </div>
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index f603b757ed..3d20b6bdc3 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -7,9 +7,9 @@
     padding-top: 48px !important;
 }
 
-.libraryPage:not(.metadataEditorPage):not(#indexPage):not(#boxsetsPage) {
-    padding-top: 91px !important;
-}
+    .libraryPage:not(.metadataEditorPage):not(#indexPage):not(#boxsetsPage):not(#itemListPage) {
+        padding-top: 91px !important;
+    }
 
 .ui-panel fieldset + fieldset {
     margin-top: 2em;
@@ -651,6 +651,10 @@ a.itemTag:hover {
         height: 7px;
     }
 
+.viewControls, .listTopPaging {
+    display: inline-block;
+}
+
 @media all and (min-width: 600px) {
     .inlineDetailSection:not(.hide) {
         display: inline-block;
@@ -736,6 +740,7 @@ a.itemTag:hover {
         }
 }
 
+
 @media all and (min-width: 750px) {
 
     .viewMenuLink {
@@ -763,16 +768,6 @@ a.itemTag:hover {
     }
 }
 
-@media all and (min-width: 650px) {
-    .viewControls, .listTopPaging {
-        display: inline-block;
-    }
-
-        .viewControls + .listTopPaging {
-            margin-left: 1em;
-        }
-}
-
 @media all and (min-width: 750px) {
     .detailPageContent {
         max-width: 900px;
diff --git a/dashboard-ui/episodes.html b/dashboard-ui/episodes.html
index 48d464a9fb..4a83dd96ac 100644
--- a/dashboard-ui/episodes.html
+++ b/dashboard-ui/episodes.html
@@ -21,12 +21,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/gamegenres.html b/dashboard-ui/gamegenres.html
index 9bf37c1521..81453abd1b 100644
--- a/dashboard-ui/gamegenres.html
+++ b/dashboard-ui/gamegenres.html
@@ -14,11 +14,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/games.html b/dashboard-ui/games.html
index 90daf4fd28..ae60fd3868 100644
--- a/dashboard-ui/games.html
+++ b/dashboard-ui/games.html
@@ -16,12 +16,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
 
diff --git a/dashboard-ui/gamestudios.html b/dashboard-ui/gamestudios.html
index 77bb00689e..51fe231e9e 100644
--- a/dashboard-ui/gamestudios.html
+++ b/dashboard-ui/gamestudios.html
@@ -14,11 +14,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/itemlist.html b/dashboard-ui/itemlist.html
index 39ef83e401..ac31e62e5a 100644
--- a/dashboard-ui/itemlist.html
+++ b/dashboard-ui/itemlist.html
@@ -22,11 +22,13 @@
                             <option value="Poster">Poster</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/moviegenres.html b/dashboard-ui/moviegenres.html
index 0ad6903bf4..b36bcc0429 100644
--- a/dashboard-ui/moviegenres.html
+++ b/dashboard-ui/moviegenres.html
@@ -18,11 +18,11 @@
 
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/moviepeople.html b/dashboard-ui/moviepeople.html
index a302919685..c1c1e14a9d 100644
--- a/dashboard-ui/moviepeople.html
+++ b/dashboard-ui/moviepeople.html
@@ -20,11 +20,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index efde7582c0..90fb8d9ca8 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -28,11 +28,13 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/moviestudios.html b/dashboard-ui/moviestudios.html
index 9a9db98cdd..ebc832066a 100644
--- a/dashboard-ui/moviestudios.html
+++ b/dashboard-ui/moviestudios.html
@@ -18,11 +18,11 @@
 
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/movietrailers.html b/dashboard-ui/movietrailers.html
index e56858173f..85820c4016 100644
--- a/dashboard-ui/movietrailers.html
+++ b/dashboard-ui/movietrailers.html
@@ -20,12 +20,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/musicalbumartists.html b/dashboard-ui/musicalbumartists.html
index 72e253406e..e9f8b26168 100644
--- a/dashboard-ui/musicalbumartists.html
+++ b/dashboard-ui/musicalbumartists.html
@@ -19,11 +19,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/musicalbums.html b/dashboard-ui/musicalbums.html
index 990292c51a..fe1888364a 100644
--- a/dashboard-ui/musicalbums.html
+++ b/dashboard-ui/musicalbums.html
@@ -25,11 +25,13 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/musicartists.html b/dashboard-ui/musicartists.html
index 8493eab5ce..86acb81e09 100644
--- a/dashboard-ui/musicartists.html
+++ b/dashboard-ui/musicartists.html
@@ -19,11 +19,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/musicgenres.html b/dashboard-ui/musicgenres.html
index 17242f2f1b..7a1f04dcba 100644
--- a/dashboard-ui/musicgenres.html
+++ b/dashboard-ui/musicgenres.html
@@ -16,11 +16,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/musicvideos.html b/dashboard-ui/musicvideos.html
index 98472a8ec5..9dfd9c4bad 100644
--- a/dashboard-ui/musicvideos.html
+++ b/dashboard-ui/musicvideos.html
@@ -20,12 +20,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/songs.html b/dashboard-ui/songs.html
index f97d106afd..03c2ada958 100644
--- a/dashboard-ui/songs.html
+++ b/dashboard-ui/songs.html
@@ -16,12 +16,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/tvgenres.html b/dashboard-ui/tvgenres.html
index 3dc01f7c34..4634a5a264 100644
--- a/dashboard-ui/tvgenres.html
+++ b/dashboard-ui/tvgenres.html
@@ -17,11 +17,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/tvpeople.html b/dashboard-ui/tvpeople.html
index a35bc4b5cd..e433fe9268 100644
--- a/dashboard-ui/tvpeople.html
+++ b/dashboard-ui/tvpeople.html
@@ -20,11 +20,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html
index 6bcdb4459b..96496b7e55 100644
--- a/dashboard-ui/tvshows.html
+++ b/dashboard-ui/tvshows.html
@@ -27,11 +27,13 @@
                             <option value="Timeline">Timeline</option>
                         </select>
                     </div>
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
                 <div class="viewSummary"></div>
             </div>
             <div id="items" class="itemsContainer"></div>
diff --git a/dashboard-ui/tvstudios.html b/dashboard-ui/tvstudios.html
index 25b876e680..a5b2e86436 100644
--- a/dashboard-ui/tvstudios.html
+++ b/dashboard-ui/tvstudios.html
@@ -17,11 +17,11 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+                    <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>