🌊 Streams: Normalize paddings (#216277)

Normalizes padding to align with design:

More padding above the title:
<img width="390" alt="Screenshot 2025-03-28 at 12 03 35"
src="https://github.com/user-attachments/assets/145d9f58-b65f-4774-b4a7-0af9bdc2ad8b"
/>

Unsure - should this apply to listing page as well?
<img width="422" alt="Screenshot 2025-03-28 at 12 05 45"
src="https://github.com/user-attachments/assets/c095f617-6e48-49c0-b8cf-18e6e0b954ff"
/>

Same paddings between all the panels:
<img width="1161" alt="Screenshot 2025-03-28 at 12 06 13"
src="https://github.com/user-attachments/assets/1447bb5f-cd34-4876-923a-fb796e41cca5"
/>

Same padding above and below sub tab group in management:
<img width="522" alt="Screenshot 2025-03-28 at 12 06 34"
src="https://github.com/user-attachments/assets/c0c94cad-82c6-4e59-b10b-d10c6cda6898"
/>
This commit is contained in:
Joe Reuter 2025-03-28 14:39:22 +01:00 committed by GitHub
parent f49688f227
commit 549aeb9a33
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 6 additions and 5 deletions

View file

@ -31,7 +31,7 @@ export function Wrapper({
return (
<EuiFlexGroup
direction="column"
gutterSize="l"
gutterSize="m"
className={css`
max-width: 100%;
`}

View file

@ -121,7 +121,7 @@ export function StreamStatsPanel({
});
return (
<EuiFlexGroup direction="row" gutterSize="s">
<EuiFlexGroup direction="row" gutterSize="m">
<EuiFlexItem grow={3}>
<EuiPanel hasShadow={false} hasBorder>
<EuiFlexGroup direction="column" gutterSize="xs">

View file

@ -160,7 +160,7 @@ export function StreamDetailOverview({ definition }: { definition?: IngestStream
return (
<>
<EuiFlexGroup direction="column">
<EuiFlexGroup direction="column" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" justifyContent="flexEnd">
<EuiFlexItem grow>
@ -207,7 +207,7 @@ export function StreamDetailOverview({ definition }: { definition?: IngestStream
</EuiFlexItem>
<EuiFlexItem grow>
<EuiFlexGroup direction="row">
<EuiFlexGroup direction="row" gutterSize="m">
<EuiFlexItem grow={4}>{definition && <TabsPanel tabs={tabs} />}</EuiFlexItem>
<EuiFlexItem grow={8}>
<StreamChartPanel

View file

@ -25,6 +25,7 @@ export function StreamsAppPageBody({
border-radius: 0px;
display: flex;
overflow-y: auto;
padding-top: ${theme.size.base};
${!background ? `background-color: transparent;` : ''}
`}
paddingSize="l"

View file

@ -21,7 +21,7 @@ export function StreamsAppPageHeader({
<EuiFlexGroup direction="column" gutterSize="none">
<EuiPageHeader
className={css`
padding: ${theme.size.m} ${theme.size.l};
padding: ${theme.size.l} ${theme.size.l} ${theme.size.m};
`}
>
{title}