Tweak sidebar styles and list structure to fix long table names on a single line

static/css/app.css

@@ -69,43 +69,59 @@
   left: 0px;
   top: 0px;
   bottom: 0px;
-  background: #31373d;
-  font-size: 13px;
 }
 
-#sidebar .wrapper {
-  height: 100%;
-}
-
-#sidebar .wrapper div.title {
+#sidebar .title {
+  position: absolute;
+  top: 0;
+  width: 100%;
   line-height: 33px;
   height: 33px;
   padding: 0px 8px;
   padding-left: 12px;
   color: #fff;
+  background: #31373d;
 }
 
 #sidebar div.tables-list {
   position: absolute;
-  width: 250px;
+  right: 0;
   top: 0px;
   left: 0px;
   bottom: 130px;
   overflow: auto;
+  background: #31373d;
 }
 
-#sidebar div.table-information {
-  border-top: 1px solid #272c30;
-  background: #272c30;
-  position: absolute;
-  width: 250px;
-  left: 0px;
-  bottom: 0px;
-  height: 130px;
+#sidebar div.tables-list .wrap {
+  height: 100%;
   overflow: auto;
 }
 
+#sidebar div.tables-list #tables {
+  padding: 33px 0 0;
+}
+
+#sidebar div.table-information {
+  position: fixed;
+  width: 250px;
+  left: 0px;
+  height: 130px;
+  bottom: 0px;
+  background: #272c30;
+}
+
+#sidebar div.table-information .wrap {
+  height: 100%;
+  overflow-y: auto;
+}
+
+#sidebar div.table-information .title {
+  background: #272c30;
+}
+
 #sidebar div.table-information ul {
+  padding: 33px 0 0;
   font-size: 12px;
   display: none;
 }
@@ -113,12 +129,14 @@
 #sidebar div.table-information ul li {
   line-height: 24px;
   height: 24px;
+  padding: 0 8px 0 12px;
   cursor: default;
   color: #637D94 !important;
 }
 
 #sidebar div.table-information ul li span {
   color: #95a7b7;
+  min-width: 0;
 }
 
 #sidebar ul {
@@ -130,8 +148,8 @@
   list-style: none;
   list-style-type: none;
   line-height: 30px;
-  padding: 0px 8px;
-  padding-left: 12px;
+  padding: 0px;
+  margin: 0px;
   cursor: pointer;
   color: #95a7b7 !important;
   white-space: nowrap;
@@ -144,10 +162,17 @@
   -webkit-font-smoothing: antialiased;
 }
 
-#sidebar ul li:hover {
+#sidebar ul li:hover span {
   background: #272c30;
 }
 
+#sidebar ul li span {
+  padding: 0px 8px 0 12px;
+  display: inline-block;
+  width: auto;
+  min-width: 100%;
+}
+
 #body {
   position: fixed;
   top: 50px;

static/index.html

@@ -23,12 +23,14 @@
     </ul>
   </div>
   <div id="sidebar">
-    <div class="wrapper">
-      <div class="tables-list">
+    <div class="tables-list">
+      <div class="wrap">
         <div class="title">Database Tables</div>
         <ul id="tables"></ul>
       </div>
-      <div class="table-information">
+    </div>
+    <div class="table-information">
+      <div class="wrap">
         <div class="title">Table Information</div>
         <ul>
           <li>Size: <span id="table_total_size"></span></li>

static/js/app.js

@@ -31,7 +31,7 @@ function explainQuery(query, cb) {
 function loadTables() {
   getTables(function(data) {
     data.forEach(function(item) {
-      $("<li>" + item + "</li>").appendTo("#tables");
+      $("<li><span>" + item + "</span></li>").appendTo("#tables");
     });
   });
 }