Cleaned up class names in logviewer overview to use new logviewer classes and made a logviewer specific less stylesheet. Also left aligned the saved searches to make them look better

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -137,6 +137,7 @@
 @import "components/umb-iconpicker.less";
 @import "components/umb-insert-code-box.less";
 @import "components/umb-packages.less";
+@import "components/umb-logviewer.less";
 @import "components/umb-package-local-install.less";
 @import "components/umb-panel-group.less";
 @import "components/umb-lightbox.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-logviewer.less

@@ -0,0 +1,42 @@
+/* PACKAGE DETAILS */
+
+.umb-logviewer {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+@sidebarwidth: 350px; // Width of sidebar. Ugly hack because of old version of Less
+
+.umb-logviewer__main-content {
+    flex: 1 1 auto;
+    margin-right: 20px;
+    width: calc(~'100%' - ~'@{sidebarwidth}' - ~'20px'); // Make sure that the main content area doesn't gets affected by inline styling
+    min-width: 500px;
+
+    .btn-link {
+        text-align: left;
+    }
+}
+
+.umb-logviewer__sidebar {
+    flex: 0 0 @sidebarwidth;
+}
+
+@media (max-width: 768px) {
+
+    .umb-logviewer {
+        flex-direction: column;
+    }
+
+    .umb-logviewer__main-content {
+        flex: 1 1 auto;
+        width: 100%;
+        margin-bottom: 30px;
+        margin-right: 0;        
+    }
+
+    .umb-logviewer__sidebar {
+        flex: 1 1 auto;
+        width: 100%;
+    }
+}

src/Umbraco.Web.UI.Client/src/views/logviewer/overview.html

@@ -1,4 +1,4 @@
-<div data-element="editor-logs" ng-controller="Umbraco.Editors.LogViewer.OverviewController as vm" class="clearfix">
+<div data-element="editor-logs" ng-controller="Umbraco.Editors.LogViewer.OverviewController as vm" class="clearfix" id="logview">
 
     <umb-editor-view footer="false">
 
@@ -24,8 +24,8 @@
                 </umb-box>
             </div>
 
-            <div class="umb-package-details" ng-show="!vm.loading && vm.canLoadLogs">
-                <div class="umb-package-details__main-content">
+            <div class="umb-logviewer" ng-show="!vm.loading && vm.canLoadLogs">
+                <div class="umb-logviewer__main-content">
                     <!-- Saved Searches -->
                     <umb-box>
                         <umb-box-header title="Saved Searches"></umb-box-header>
@@ -68,7 +68,7 @@
                     </umb-box>
                 </div>
 
-                <div class="umb-package-details__sidebar">
+                <div class="umb-logviewer__sidebar">
                     <!-- No of Errors -->
                     <umb-box ng-click="vm.searchLogQuery('Has(@Exception)')" style="cursor:pointer;">
                         <umb-box-header title="Number of Errors"></umb-box-header>
@@ -95,4 +95,4 @@
             </div>
         </umb-editor-container>
     </umb-editor-view>
-</div>
+</div>