Restore messages sidebar in FlipperMessages

Summary:
Restored sidebar in Flipper messages plugin, by using a Container, as DetailsSidebar is only valid in a PluginContainer context.

Also made tab rendering a bit more condensed while at it.

Reviewed By: timur-valiev

Differential Revision: D29734639

fbshipit-source-id: d3ec6f354e14194035e93daa014985721844416d

desktop/app/src/chrome/FlipperDevTools.tsx

@@ -15,7 +15,7 @@ import {FlipperMessages} from './FlipperMessages';
 
 export function FlipperDevTools() {
   return (
-    <Layout.Container pad grow>
+    <Layout.Container grow>
       <Tabs grow>
         <Tab tab="Console">
           <ConsoleLogs />

desktop/app/src/chrome/FlipperMessages.tsx

@@ -14,8 +14,6 @@ import {
   Layout,
   createState,
   createDataSource,
-  DetailSidebar,
-  Panel,
   theme,
   styled,
   useValue,
@@ -124,13 +122,11 @@ export function getFlipperDebugMessages() {
 
 function Sidebar({selection}: {selection: undefined | MessageRow}) {
   const renderExtra = (extra: any) => (
-    <Panel title={'Payload'} collapsible={false}>
-      <DataInspector data={extra} expandRoot={false} />
-    </Panel>
+    <DataInspector data={extra} expandRoot={false} />
   );
 
   return (
-    <DetailSidebar>
+    <Layout.ScrollContainer pad>
       {selection != null ? (
         renderExtra(selection.payload)
       ) : (
@@ -138,7 +134,7 @@ function Sidebar({selection}: {selection: undefined | MessageRow}) {
           Select a message to view details
         </Placeholder>
       )}
-    </DetailSidebar>
+    </Layout.ScrollContainer>
   );
 }
 
@@ -189,7 +185,7 @@ export function FlipperMessages() {
   );
 
   return (
-    <Layout.Container grow>
+    <Layout.Right resizable width={400}>
       <DataTable<MessageRow>
         dataSource={flipperDebugMessages}
         columns={COLUMN_CONFIG}
@@ -204,6 +200,6 @@ export function FlipperMessages() {
         }
       />
       <Sidebar selection={selection} />
-    </Layout.Container>
+    </Layout.Right>
   );
 }

desktop/flipper-plugin/src/ui/Tabs.tsx

@@ -54,7 +54,11 @@ export function Tabs({
         setActiveTab(key);
       }}
       {...baseProps}
-      className={cx(className, grow !== false ? growingTabs : undefined)}>
+      className={cx(
+        className,
+        baseTabs,
+        grow !== false ? growingTabs : undefined,
+      )}>
       {keyedChildren}
     </AntdTabs>
   );
@@ -75,6 +79,14 @@ export const Tab: React.FC<
   );
 };
 
+const baseTabs = css`
+  & .ant-tabs-nav {
+    margin: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+`;
+
 const growingTabs = css`
   flex: 1;
   & .tabpanel {