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

chrome/browser/resources/inspect/inspect.css

Index: chrome/browser/resources/inspect/inspect.css
diff --git a/chrome/browser/resources/inspect/inspect.css b/chrome/browser/resources/inspect/inspect.css
index bf0a1107eac9e851b78cafc44ead77381fa9a8fa..a50292c45d0aa9db1f381dbf721a10b6e64bc245 100644
--- a/chrome/browser/resources/inspect/inspect.css
+++ b/chrome/browser/resources/inspect/inspect.css
@@ -7,7 +7,6 @@ body {
   font-size: 13px;
   margin: 0;
   min-width: 47em;
-  padding: 20px 20px 65px 0;
 }
 
 .hidden {
@@ -29,11 +28,17 @@ img {
 }
 
 #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 {
@@ -70,6 +75,9 @@ img {
   color: #999;
 }
 
+#content > div {
+  padding: 20px 20px 65px 0;
+}
 #content > div:not(.selected) {
   display: none;
 }