Fix center alignment of sources empty state

After https://crrev.com/c/6285925 the center alignment of the
sources placeholder elements was broken if the window is wide
enough. This CL fixes it.

Before: https://i.imgur.com/eyhb2zW.png
After: https://i.imgur.com/FIvCxXE.png
Fixed: 398962649
Change-Id: I4a20ec5845b3769c79f75d67f2b34b4548a3c6d9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6298810
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>

Author: ktran

front_end/panels/sources/SourcesView.ts

@@ -148,6 +148,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   private placeholderElement(): Element {
     const placeholder = document.createElement('div');
+    placeholder.classList.add('sources-placeholder');
 
     const workspaceElement = placeholder.createChild('div', 'tabbed-pane-placeholder-row');
     workspaceElement.classList.add('workspace');

front_end/ui/legacy/tabbedPane.css

@@ -48,6 +48,10 @@
 .tabbed-pane-placeholder {
   text-align: center;
   align-content: center;
+
+  .sources-placeholder {
+    display: inline-block;
+  }
 }
 
 .tabbed-pane-placeholder-row {