From f8afd1a70a7c2a20e78bed69ea828111163fed83 Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Thu, 7 Nov 2024 09:04:02 -0600
Subject: [PATCH] [ui] Add padding to page headers for scenarios when they wrap
 (#25752)

## Summary & Motivation

This was noticed during the runs feed testing but wasn't specific to the
runs feed. In general, if you make the page narrow enough that the page
header wraps, there is no padding and the top text touches the navbar.
We also didn't mandate padding to the left of the right-side actions,
and this PR adds a gap there as well.

## How I Tested These Changes

Tested manually on a variety of pages + screen sizes

Co-authored-by: bengotow <bgotow@elementl.com>
---
 .../packages/ui-components/src/components/PageHeader.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
index 3de87bda4b45d..b32443c4c3a1f 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
@@ -25,8 +25,9 @@ export const PageHeader = (props: Props) => {
     >
       {title && (
         <Box
+          padding={{vertical: 8}}
           style={{minHeight: 52, alignContent: 'center'}}
-          flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
+          flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 8}}
         >
           <Box flex={{direction: 'row', alignItems: 'center', gap: 12, wrap: 'wrap'}}>
             {title}