App Inspect rounded container

Summary: ^

Reviewed By: antonk52

Differential Revision: D47591057

fbshipit-source-id: 5f3f308fb252245ebe510dd98b4cbd7ea7c6e27e

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

@@ -20,7 +20,6 @@ import {Layout} from './Layout';
 const SidebarInteractiveContainer = styled(Interactive)<InteractiveProps>({
   display: 'flex',
   flex: '0 1 1',
-  background: theme.backgroundDefault,
 });
 SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
 
@@ -201,7 +200,13 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           {gutter ? (
             <GutterWrapper position={position}>
               {/* Stop propagating mousedown events to prevent SidebarInteractiveContainer from resizing whenever a user starts selecting text in a child */}
-              <Layout.Container grow onMouseDown={(e) => e.stopPropagation()}>
+              <Layout.Container
+                style={{
+                  background: theme.backgroundDefault,
+                  borderRadius: theme.borderRadius,
+                }}
+                grow
+                onMouseDown={(e) => e.stopPropagation()}>
                 {children}
               </Layout.Container>
             </GutterWrapper>

desktop/flipper-ui-core/src/sandy-chrome/LeftSidebar.tsx

@@ -15,11 +15,7 @@ import {Button, Tooltip, Typography} from 'antd';
 import {InfoCircleOutlined} from '@ant-design/icons';
 
 export const LeftSidebar: React.FC = ({children}) => (
-  <Layout.Container
+  <Layout.Container style={{paddingTop: theme.space.small}} grow shrink>
-    borderRight
-    style={{paddingTop: theme.space.small}}
-    grow
-    shrink>
     {children}
   </Layout.Container>
 );