feat(ourlogs): Add a dark background to the logs data section (#92321)

![Screenshot 2025-05-27 at 12 08
46 PM](https://github.com/user-attachments/assets/2a1ccf68-3884-45c7-8da5-984d4b8ed071)

Author: colin-sentry

static/app/views/explore/logs/logsTab.tsx

@@ -38,12 +38,14 @@ import {HiddenColumnEditorLogFields} from 'sentry/views/explore/logs/constants';
 import {AutorefreshToggle} from 'sentry/views/explore/logs/logsAutoRefresh';
 import {LogsGraph} from 'sentry/views/explore/logs/logsGraph';
 import {
+  BottomSectionBody,
   FilterBarContainer,
   LogsGraphContainer,
   LogsItemContainer,
   LogsTableActionsContainer,
   StyledPageFilterBar,
   TableActionsContainer,
+  TopSectionBody,
 } from 'sentry/views/explore/logs/styles';
 import {LogsInfiniteTable as LogsInfiniteTable} from 'sentry/views/explore/logs/tables/logsInfiniteTable';
 import {LogsTable} from 'sentry/views/explore/logs/tables/logsTable';
@@ -153,7 +155,7 @@ export function LogsTabContent({
   }, [fields, setFields, stringAttributes, numberAttributes]);
   return (
     <SearchQueryBuilderProvider {...searchQueryBuilderProps}>
-      <Layout.Body noRowGap>
+      <TopSectionBody noRowGap>
         <Layout.Main fullWidth>
           <FilterBarContainer>
             <StyledPageFilterBar condensed>
@@ -178,6 +180,10 @@ export function LogsTabContent({
               searchBarWidthOffset={columnEditorButtonRef.current?.clientWidth}
             />
           </SchemaHintsSection>
+        </Layout.Main>
+      </TopSectionBody>
+      <BottomSectionBody noRowGap>
+        <Layout.Main fullWidth>
           <LogsGraphContainer>
             <LogsGraph timeseriesResult={timeseriesResult} />
           </LogsGraphContainer>
@@ -209,7 +215,7 @@ export function LogsTabContent({
             </Feature>
           </LogsItemContainer>
         </Layout.Main>
-      </Layout.Body>
+      </BottomSectionBody>
     </SearchQueryBuilderProvider>
   );
 }

static/app/views/explore/logs/styles.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Button} from 'sentry/components/core/button';
 import {GRID_BODY_ROW_HEIGHT} from 'sentry/components/gridEditable/styles';
 import {HighlightComponent} from 'sentry/components/highlight';
+import {Body} from 'sentry/components/layouts/thirds';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import Panel from 'sentry/components/panels/panel';
 import {space} from 'sentry/styles/space';
@@ -299,3 +300,22 @@ export function getLogColors(level: SeverityLevel, theme: Theme) {
       throw new Error(`Invalid log type, got ${level}`);
   }
 }
+
+export const TopSectionBody = styled(Body)`
+  padding-bottom: 0;
+  flex: 0 0 auto;
+
+  @media (min-width: ${p => p.theme.breakpoints.medium}) {
+    padding-bottom: ${space(2)};
+  }
+`;
+
+export const BottomSectionBody = styled(Body)`
+  padding-top: 0;
+  background-color: ${p => p.theme.backgroundSecondary};
+  border-top: 1px solid ${p => p.theme.border};
+
+  @media (min-width: ${p => p.theme.breakpoints.medium}) {
+    padding-top: ${space(1)};
+  }
+`;