github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Cases]: Pagination UI improvement for show more button (#154350)

Browse source 
## Summary

This PR shows gap between comment list and show more button so that it
is clearly visible.


**Before:**

<img width="1728" alt="image"
src="https://user-images.githubusercontent.com/117571355/229822931-455e2450-0787-401b-ab42-c2522c1e57f8.png">


**After:**
<img width="1721" alt="image"
src="https://user-images.githubusercontent.com/117571355/229821966-1bfc2688-6a96-456c-b4d7-03dc33abbcf8.png">

<img width="1728" alt="image"
src="https://user-images.githubusercontent.com/117571355/229823251-fea935d4-58ef-4db8-bdf6-7760808fe6e1.png">
This commit is contained in:
Janki Salvi 2023-04-04 17:39:38 +02:00 • committed by GitHub
parent 56c28af1f5
commit e5bd22b54d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/cases/public/components/user_actions/index.tsx
View file

@ -30,11 +30,11 @@ const getIconsCss = (hasNextPage: boolean | undefined, euiTheme: EuiThemeCompute
const customSize = hasNextPage
? {
showMoreSectionSize: euiTheme.size.xxxl,
marginTopShowMoreSectionSize: euiTheme.size.xxl,
marginBottomShowMoreSectionSize: euiTheme.size.xxl,
marginTopShowMoreSectionSize: euiTheme.size.xxxl,
marginBottomShowMoreSectionSize: euiTheme.size.xxxl,
}
: {
showMoreSectionSize: euiTheme.size.s,
showMoreSectionSize: euiTheme.size.m,
marginTopShowMoreSectionSize: euiTheme.size.m,
marginBottomShowMoreSectionSize: euiTheme.size.m,
};

8
x-pack/plugins/cases/public/components/user_actions/show_more_button.tsx
View file

@ -30,8 +30,12 @@ export const ShowMoreButton = React.memo<ShowMoreButtonProps>(
css={css`
display: flex;
justify-content: center;
margin-block: ${euiTheme.size.xl};
margin-inline-start: ${euiTheme.size.xxxl};
position: relative;
margin-block: ${euiTheme.size.base};
z-index: 1;
border-top: ${euiTheme.size.base} solid ${euiTheme.colors.emptyShade};
border-bottom: ${euiTheme.size.base} solid ${euiTheme.colors.emptyShade};
border-radius: 16px;
`}
>
<EuiButton