Avoid unnecessary horizontal scrollbars (#160)

* Avoid unnecessary horizontal scrollbars

Fix long key values rendering with horizontal scrollbar;
Fix keys folder with checkbox in one line and key name in another line.

* Ellipsis replaced by horizontal scrollbar while keeping elements aligned

https://github.com/erikdubbelboer/phpRedisAdmin/pull/160#issuecomment-589968360

* Fix missing padding on the right frame in Firefox for Mac

https://github.com/erikdubbelboer/phpRedisAdmin/pull/160#issuecomment-590048242

3 files changed, 16 insertions, 6 deletions

diff --git a/css/common.css b/css/common.css
index b2a8431..9dc6276 100644
--- a/css/common.css
+++ b/css/common.css
@@ -52,6 +52,6 @@ background: url(../images/add.png) left center no-repeat;
 
 
 .data {
-white-space: pre;
+white-space: pre-wrap;
 }
 
diff --git a/css/index.css b/css/index.css
index 7b898e5..4a56aa9 100644
--- a/css/index.css
+++ b/css/index.css
@@ -3,10 +3,14 @@ position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
+display: flex;
+flex-direction: column;
 width: 290px;
 height: 100%;
+}
+
+#header {
 padding-left: 10px;
-border-right: 1px solid #000;
 }
 
 #sidebar a, #sidebar a:visited {
@@ -23,7 +27,9 @@ text-decoration: underline;
 
 
 #keys {
+flex-grow: 1;
 width: 290px;
+margin-top: 10px;
 padding-left: 10px;
 overflow: auto;
 }
@@ -36,6 +42,7 @@ padding: 0;
 
 #keys li {
 font-weight: normal;
+white-space: nowrap;
 }
 
 #keys li.folder {
@@ -115,6 +122,7 @@ background-color: #aaa;
 cursor: col-resize;
 padding: 0;
 margin: 0;
+border-left: 1px solid #000;
 }
 
 #resize-layover {
@@ -133,11 +141,12 @@ top: 0;
 left: 305px;
 right: 0;
 bottom: 0;
-padding-left: 2em;
 }
 
 #frame iframe {
-width: 100%;
+width: calc(100% - 3em);
 height: 100%;
+margin-left: 1.5em;
+margin-right: 1.5em;
 }
 
diff --git a/index.php b/index.php
index 5ea3b25..933796a 100644
--- a/index.php
+++ b/index.php
@@ -108,7 +108,7 @@ if($redis) {
         ?>
         <li<?php echo empty($class) ? '' : ' class="'.implode(' ', $class).'"'?>>
         <input type="checkbox" name="checked_keys" value="<?php echo $fullkey?>"/>
-        <a href="?view&amp;s=<?php echo $server['id']?>&amp;d=<?php echo $server['db']?>&amp;key=<?php echo urlencode($fullkey)?>"><?php echo format_html($name)?><?php if ($len !== false) { ?><span class="info">(<?php echo $len?>)</span><?php } ?></a>
+        <a href="?view&amp;s=<?php echo $server['id']?>&amp;d=<?php echo $server['db']?>&amp;key=<?php echo urlencode($fullkey)?>" title="<?php echo format_html($name)?>"><?php echo format_html($name)?><?php if ($len !== false) { ?><span class="info">(<?php echo $len?>)</span><?php } ?></a>
         </li>
         <?php
       }
@@ -190,7 +190,7 @@ require 'includes/header.inc.php';
 
 ?>
 <div id="sidebar">
-
+<div id="header">
 <h1 class="logo"><a href="?overview&amp;s=<?php echo $server['id']?>&amp;d=<?php echo $server['db']?>">phpRedisAdmin</a></h1>
 
 <p>
@@ -247,6 +247,7 @@ if ($databases > 1) { ?>
 <button id="operations">
 <a href="delete.php?s=<?php echo $server['id']?>&amp;d=<?php echo $server['db']?>&batch_del=1" class="batch_del">Delete selected<img src="images/delete.png" style="width: 1em;height: 1em;vertical-align: middle;" title="Delete selected" alt="[X]"></a>
 </button>
+</div>
 <div id="keys">
 <ul>
 <?php print_namespace($namespaces, 'Keys', '', empty($namespaces))?>