1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00

fix: minor UI adjustments (#7117)

This PR contains two small UI improvements for the new project creation
form:

1. Wrap the action buttons when necessary (so that they don't become
unavailable when the window gets narrow enough.)
2. Make the change request table scrollable horizontally, so that it can
still be configured on narrow windows.

---------

Co-authored-by: sjaanus <sellinjaanus@gmail.com>
This commit is contained in:
Thomas Heartman 2024-05-28 07:10:50 +02:00 committed by GitHub
parent 9a51f68f5f
commit 10155935ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 5 deletions

View File

@ -72,6 +72,7 @@ const FormActions = styled(StyledFormSection)(({ theme }) => ({
display: 'flex', display: 'flex',
gap: theme.spacing(5), gap: theme.spacing(5),
justifyContent: 'flex-end', justifyContent: 'flex-end',
flexFlow: 'row wrap',
})); }));
type FormProps = { type FormProps = {

View File

@ -69,3 +69,8 @@ export const StyledDropdownSearch = styled(TextField, {
export const TableSearchInput = styled(StyledDropdownSearch)(({ theme }) => ({ export const TableSearchInput = styled(StyledDropdownSearch)(({ theme }) => ({
maxWidth: '30ch', maxWidth: '30ch',
})); }));
export const ScrollContainer = styled('div')(({ theme }) => ({
width: '100%',
overflow: 'auto',
}));

View File

@ -17,6 +17,7 @@ import {
StyledDropdownSearch, StyledDropdownSearch,
TableSearchInput, TableSearchInput,
HiddenDescription, HiddenDescription,
ScrollContainer,
} from './SelectionButton.styles'; } from './SelectionButton.styles';
import { ChangeRequestTable } from './ChangeRequestTable'; import { ChangeRequestTable } from './ChangeRequestTable';
@ -445,11 +446,13 @@ export const TableSelect: FC<TableSelectProps> = ({
}} }}
onKeyDown={toggleTopItem} onKeyDown={toggleTopItem}
/> />
<ChangeRequestTable <ScrollContainer>
environments={filteredEnvs} <ChangeRequestTable
enableEnvironment={onEnable} environments={filteredEnvs}
disableEnvironment={onDisable} enableEnvironment={onEnable}
/> disableEnvironment={onDisable}
/>
</ScrollContainer>
</StyledDropdown> </StyledDropdown>
</StyledPopover> </StyledPopover>
</> </>