DevTools: Fix Console Live Expression CSS

This patch updates the css for the console pin pane so that it never
exceeds 50% of the outer window.

Issue 884137 shows that when the console window height is small, the
live expression pane can overflow the console input pane making it
impossible to type into the console. This is due to the pin pane css
setting a max-height of 200px regardless of the height of the outer
window.

The fix is to update the css so that pane has a max height of 50% but
the inner container uses 200px so that it will have a height of the
smaller of the two. Allowing users to always see the input area.

See: https://imgur.com/a/GS8yA8h


Bug: 884137
Change-Id: I85337f7391a882ca107a30be2bf5c2a12f261787
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1837527Reviewed-by: John Emau <John.Emau@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: James Lissiak <jalissia@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#703449}

third_party/blink/renderer/devtools/front_end/console/consolePinPane.css

@@ -5,6 +5,7 @@
  */
 
 .console-pins {
+  max-height: 200px;
   overflow-y: auto;
   background: var(--toolbar-bg-color);
   --error-background-color: hsl(0, 100%, 97%);

third_party/blink/renderer/devtools/front_end/console/consoleView.css

@@ -490,5 +490,5 @@
 
 .console-view-pinpane {
     flex: none;
-    max-height: 200px;
+    max-height: 50%;
 }