feat(performance-widgets-empty state size): Reduced size of empty widget state. (#58633)

This pr aims to reduce the size of empty widget state to create vertical
room for the rest of the content on the performance landing page.

Both columns empty:

<img width="900" alt="Screenshot 2023-10-23 at 2 53 11 PM"
src="https://github.com/getsentry/sentry/assets/60121741/9c869e4b-8a3c-456b-843a-6c585fcc2949">

One column empty:

<img width="900" alt="Screenshot 2023-10-23 at 2 54 11 PM"
src="https://github.com/getsentry/sentry/assets/60121741/bcff5407-f6e4-44b7-9f54-6ea714150356">

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/views/performance/landing/widgets/components/performanceWidgetContainer.tsx

@@ -6,6 +6,8 @@ import {space} from 'sentry/styles/space';
 export type PerformanceWidgetContainerTypes = 'panel' | 'inline';
 
 const StyledPanel = styled(Panel)`
+  display: flex;
+  flex-direction: column;
   padding-top: ${space(2)};
   margin-bottom: 0;
 `;

static/app/views/performance/landing/widgets/components/selectableList.tsx

@@ -165,22 +165,29 @@ const StyledIconClose = styled(IconClose)`
 `;
 
 const StyledEmptyStateWarning = styled(EmptyStateWarning)`
-  min-height: 300px;
   justify-content: center;
   display: flex;
   align-items: center;
   flex-direction: column;
+  flex: 1;
+  padding: ${space(1)} ${space(2)} ${space(4)} ${space(2)};
+
+  svg {
+    margin-bottom: ${space(1)};
+    height: 30px;
+    width: 30px;
+  }
 `;
 
 const PrimaryMessage = styled('span')`
-  font-size: ${p => p.theme.fontSizeExtraLarge};
+  font-size: ${p => p.theme.fontSizeMedium};
   color: ${p => p.theme.gray300};
   font-weight: 600;
   margin: 0 auto ${space(1)};
 `;
 
 const SecondaryMessage = styled('p')`
-  font-size: ${p => p.theme.fontSizeMedium};
+  font-size: ${p => p.theme.fontSizeSmall};
   color: ${p => p.theme.gray300};
   max-width: 300px;
 `;