diff --git a/views/_main.html b/views/_main.html
index f68ff8bdb..567dc3704 100644
--- a/views/_main.html
+++ b/views/_main.html
@@ -52,6 +52,11 @@
                 background-color: white;
                 border: 1px solid #ced4da;
             }
+
+            table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
+                left: -15px;
+                background-color: #911f93;
+            }
         </style>
     {% endblock head %}
 
@@ -311,7 +316,21 @@
         $(document).ready(function () {
             BadgesAjax();
             $(window).on('load resize', function () {
-                $('#buttons_bars').width($('.page-wrapper').width());
+                if ($('body').hasClass('mini-sidebar')) {
+                    $('#buttons_bars').width($(window).width());
+                    $('.page-wrapper').attr('style', 'padding-top: 60px !important');
+                    $('.badge').each(function() {
+                        $(this).css('max-width', $(this).closest( "div" ).width());
+                    })
+                    $('form .row :first-child').each( function() {
+                        $(this).removeClass('text-right');
+                    })
+                    $('.container-fluid .row :first-child').each( function() {
+                        $(this).removeClass('text-right');
+                    })
+                } else {
+                    $('#buttons_bars').width($('.page-wrapper').width());
+                }
             });
 
             $('.table').on('draw.dt', function () {
diff --git a/views/episodes.html b/views/episodes.html
index 9606bc59b..ab1635ee5 100644
--- a/views/episodes.html
+++ b/views/episodes.html
@@ -35,7 +35,6 @@
 
         .badge {
             display: inline-block;
-            max-width: 500px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -539,7 +538,7 @@
                     pageLength: {{ settings.general.page_size_manual_search }},
                     lengthMenu: [ 5, 10, 15, 20, 25 ],
                     searching: true,
-                    scrollX: true,
+                    responsive: true,
                     ordering: false,
                     processing: true,
                     serverSide: false,
@@ -844,6 +843,7 @@
                     pageLength: 5,
                     searching: true,
                     ordering: false,
+                    responsive: true,
                     processing: false,
                     serverSide: false,
                     ajax: {
diff --git a/views/movie.html b/views/movie.html
index e39bbd53e..4c4a88a4b 100644
--- a/views/movie.html
+++ b/views/movie.html
@@ -35,7 +35,6 @@
 
 	.badge {
 		display: inline-block;
-		max-width: 500px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -136,7 +135,7 @@
 				<h6>Movie path is: <span id="movie_path_span" class="badge badge-secondary"></span>
 					<br>Scenename is: <span id="movie_scenename_span" class="badge badge-secondary"></span></h6>
 				<div class="container-fluid" style="padding:0px;">
-					<table id="search_result" class="table table-striped" style="width:100%">
+					<table id="search_result" class="table table-striped">
 						<thead>
 						<tr>
 							<th style="text-align: left;">Score:</th>
@@ -413,7 +412,7 @@
 				pageLength: {{ settings.general.page_size_manual_search }},
 				lengthMenu: [ 5, 10, 15, 20, 25 ],
 				searching: true,
-				scrollX: true,
+				responsive: true,
 				ordering: false,
 				processing: true,
 				serverSide: false,
@@ -675,6 +674,7 @@
 				pageLength: 5,
 				searching: true,
 				ordering: false,
+				responsive: true,
 				processing: false,
 				serverSide: false,
 				ajax: {