chrome://inspect sticky nav bar & padding under anchor

chrome/browser/resources/inspect/inspect.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body {
   color: rgb(48, 57, 66);
   font-size: 13px;
   margin: 0;
   min-width: 47em;
-  padding: 20px 20px 65px 0;
 }
 
 .hidden {
     display: none !important;
 }
 
 img {
   flex-shrink: 0;
   height: 16px;
   padding-left: 2px;
   padding-right: 5px;
   vertical-align: top;
   width: 16px;
 }
 
 #container {
   -webkit-flex-direction: row;
   display: -webkit-flex;
 }
 
 #navigation {
+  box-sizing: border-box;

[pfeldman, 2015/03/02 17:15:31]

Lets do 

* {
    box-sizing: border-box;
}

[robwu, 2015/04/04 09:18:48]

Done. I've updated some values because of the effect on calculations, to get
closer to the original appearance.
Though I didn't modify the width of the port input in the port forwarding
dialog, because 5 digits can easily be fit in 4em.

+  max-height: 100vh;

[pfeldman, 2015/03/02 17:15:31]

We don't use vh much in the source base.

[robwu, 2015/04/04 09:18:48]

What's the issue with vh?
100vh is exactly what we want here, and the (relatively new) vh unit exists for
a reason.

[pfeldman, 2015/04/04 09:32:30]

what is the effect you are trying to achieve? isn't this the same as 100% in
this case?

[robwu, 2015/04/04 09:39:37]

When the window is large enough, then there is no perceivable difference.
However, when the window's height is small, then the navigation content
overflows, but scrollbars are not displayed, which prevents the user from using
the bottom parts of the navigation menu.

Currently chrome://inspect doesn't account for small windows, but I fixed the
issue since I was editing the file anyway.

+  overflow: auto;
+  padding-top: 20px;
   width: 150px;
 }
 
 #content {
   -webkit-flex: 1;
+  max-height: 100vh;
+  overflow: auto;
 }
 
 #caption {
   color: rgb(92, 97, 102);
   font-size: 150%;
   padding-bottom: 10px;
   padding-left: 20px;
 }
 
 #serviceworker-internals {
@@ skipping 16 matching lines @@
   font: inherit;
   line-height: 17px;
   margin: 6px 0;
   padding: 0 2px;
 }
 
 .tab-header:not(.selected) > button {
   color: #999;
 }
 
+#content > div {
+  padding: 20px 20px 65px 0;
+}
 #content > div:not(.selected) {
   display: none;
 }
 
 .content-header {
   border-bottom: 1px solid #eee;
   font-size: 150%;
   padding-bottom: 10px;
 }
 
@@ skipping 319 matching lines @@
 }
 
 #port-forwarding-config-buttons {
   align-items: center;
   display: flex;
 }
 
 #port-forwarding-config-buttons > label {
   flex-grow: 1
 }