Make Sources placeholder properly scrollable

With a previous update on the empty states, the placeholder
in Sources was no longer fully visible. This fixes it.

Drive-by: Adjust paddings and shrink properties
Before: https://i.imgur.com/70lIpaH.mp4
After: https://i.imgur.com/Hp3Mjrj.mp4
Fixed: 397829607
Change-Id: I50d4886b727f9127899ac9389102271da3dfb502
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6285925
Auto-Submit: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/ui/legacy/tabbedPane.css

@@ -47,11 +47,7 @@
 
 .tabbed-pane-placeholder {
   text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  align-content: center;
 }
 
 .tabbed-pane-placeholder-row {
@@ -66,7 +62,7 @@
     border: var(--sys-size-2) dashed var(--sys-color-divider);
     padding: var(--sys-size-8);
     border-radius: var(--sys-shape-corner-medium);
-    margin-bottom: var(--sys-size-11);
+    margin: var(--sys-size-8) var(--sys-size-8) var(--sys-size-11);
 
     > .icon-container {
       flex-shrink: 0;
@@ -105,6 +101,7 @@
 
       .keybinds-key {
         display: flex;
+        flex-shrink: 0;
         align-items: center;
         justify-content: center;
         height: var(--sys-size-11);