Skip to content

Commit

Permalink
max-width fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Oct 31, 2024
1 parent 081fcc4 commit ab8b79a
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 25 deletions.
Binary file modified ...ayout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ayout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ exports[`EuiPageHeader props alignItems bottom is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -83,14 +83,14 @@ exports[`EuiPageHeader props alignItems center is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -125,14 +125,14 @@ exports[`EuiPageHeader props alignItems stretch is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -167,14 +167,14 @@ exports[`EuiPageHeader props alignItems top is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -311,14 +311,14 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
data-test-subj="test subject string"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down
28 changes: 14 additions & 14 deletions packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ exports[`EuiPageHeaderContent props alignItems bottom is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -74,14 +74,14 @@ exports[`EuiPageHeaderContent props alignItems center is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -112,14 +112,14 @@ exports[`EuiPageHeaderContent props alignItems stretch is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -150,14 +150,14 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -271,14 +271,14 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down Expand Up @@ -482,14 +482,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered 1`] = `
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row-euiPageHeaderContent__rightSideItems"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand All @@ -516,14 +516,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered with rightSideGro
data-test-subj="test subject string"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 2
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
class="euiFlexItem emotion-euiFlexItem-growZero-euiPageHeaderContent__rightSideItem"
>
<button>
Button 1
Expand Down
4 changes: 4 additions & 0 deletions packages/eui/src/components/page/page_header/page_header_content.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,16 @@ export const euiPageHeaderContentStyles = ({ euiTheme }: UseEuiTheme) => ({
euiPageHeaderContent__rightSideItems: css`
flex: 0 1 auto;
align-content: flex-start;
${logicalCSS('max-width', '100%')}
@container (min-width: ${euiTheme.breakpoint.m}px) {
${logicalCSS('max-width', '50%')}
justify-content: flex-end;
}
`,
euiPageHeaderContent__rightSideItem: css`
${logicalCSS('max-width', '100%')}
`,

euiPageHeaderContent__titleIcon: css`
position: relative;
Expand Down
6 changes: 5 additions & 1 deletion packages/eui/src/components/page/page_header/page_header_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,11 @@ export const EuiPageHeaderContent: FunctionComponent<
: [...rightSideItems].reverse();

const rightSideFlexItems = itemsToRender.map((item, index) => (
<EuiFlexItem grow={false} key={index}>
<EuiFlexItem
key={index}
grow={false}
css={contentStyles.euiPageHeaderContent__rightSideItem}
>
{item}
</EuiFlexItem>
));
Expand Down

0 comments on commit ab8b79a

Please sign in to comment.