updated explorer, fixed layout

vipra-ui/app/html/explorer.html

 <div class="fullsize navpadding container-fluid explorer" ng-cloak ng-hide="!rootModels.topicModel || state.name !== 'explorer'">
   <div class="row row-50">
-    <div class="col-xs-3 col-md-2 sidebar">
+    <div class="sidebar">
       <div class="btn-group btn-group-justified" role="group" aria-label="...">
         <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(true)" title="Select all topics">All</a>
         <a tabindex="0" class="btn btn-sm btn-default" ng-click="checkTopics(false)" title="Deselect all topics">None</a>
@@ -40,7 +40,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-xs-9 col-md-10 center">
+    <div class="center">
       <div class="wrapper">
         <div class="topbar">
           <small>Values:</small>
@@ -70,7 +70,7 @@
     </div>
   </div>
   <div class="row row-50">
-    <div class="col-xs-3 col-md-2 sidebar">
+    <div class="sidebar">
       <ul class="list-unstyled topic-choice no-offset">
         <li ng-repeat="topic in selectedTopics = (topics | filter: {selected: true} | orderBy:explorerModels.sorttopics:explorerModels.sortdir)" ng-mouseenter="highlightSeries(topic.id, true)" ng-mouseleave="highlightSeries(topic.id, false)" ng-class="{active:explorerModels.activeTopic.id===topic.id}" class="pointer text-muted">
           <div class="radio radio-condensed">
@@ -90,7 +90,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-xs-9 col-md-10 center">
+    <div class="center">
       <div class="wrapper">
         <div class="topbar">
           <small>Sequence:</small>

vipra-ui/app/less/app.less

@@ -250,17 +250,22 @@ a:hover {
 
 .explorer {
   @sidebar-padding: 5px;
+  @sidebar-width: 250px;
   .sidebar {
     background: #f9f9f9;
     padding: @sidebar-padding;
     height: 100%;
+    position: absolute;
+    width: @sidebar-width;
+    z-index: 1;
     > * + * {
       margin-top: 5px;
     }
   }
   .center {
-    padding: 0;
+    padding: 0 0 0 @sidebar-width;
     height: 100%;
+    width: 100%;
   }
   .chart {
     padding: 15px;
@@ -282,14 +287,14 @@ a:hover {
     right: @sidebar-padding;
     overflow-y: auto;
     margin-bottom: 0;
-    .ellipsis {
-      padding-right: 15px;
-    }
-    li {
+    > li {
       position: relative;
       height: 21px;
       margin-top: 1px;
     }
+    .ellipsis {
+      padding-right: 15px;
+    }
     label {
       margin: 0;
       font-weight: normal;
@@ -547,6 +552,7 @@ entity-menu {
 
 .row-50 {
   height: 50%;
+  position: relative;
 
   & + & {
     border-top: 1px solid #ddd;