mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-25 15:40:06 +03:00
chore(rtk-query): improve responsiveness
This commit is contained in:
parent
0319b810c9
commit
692d63eee6
|
@ -54,8 +54,11 @@ const AddPost = () => {
|
|||
return (
|
||||
<Flex p={'5px 0'} flexDirection="row" flexWrap="wrap" maxWidth={'85%'}>
|
||||
<Box flex={'5 0 auto'} padding="0 5px 0 0">
|
||||
<FormControl flexDirection="column" isInvalid={Boolean(post.name.length < 3 && post.name)}>
|
||||
<FormLabel htmlFor="name">Post name</FormLabel>
|
||||
<FormControl
|
||||
flexDirection="column"
|
||||
isInvalid={Boolean(post.name.length < 3 && post.name)}
|
||||
>
|
||||
<FormLabel htmlFor="name">Post name</FormLabel>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
|
|
|
@ -40,7 +40,7 @@ export class QueryList extends PureComponent<QueryListProps> {
|
|||
isSelected
|
||||
)}
|
||||
>
|
||||
<p>{queryInfo.queryKey}</p>
|
||||
<p {...styling('queryListItemKey')}>{queryInfo.queryKey}</p>
|
||||
<p {...styling('queryStatus')}>{queryInfo.query.status}</p>
|
||||
</li>
|
||||
);
|
||||
|
|
|
@ -37,7 +37,9 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
|
|||
tab.value === selectedTab
|
||||
)}
|
||||
>
|
||||
{renderTabLabel ? renderTabLabel(tab) : tab.label}
|
||||
<span>
|
||||
{renderTabLabel ? renderTabLabel(tab) : tab.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
@ -118,20 +118,24 @@ const getSheetFromColorMap = (map: ColorMap) => {
|
|||
padding: '5px 10px',
|
||||
cursor: 'pointer',
|
||||
'user-select': 'none',
|
||||
|
||||
'& > :first-child': {
|
||||
whiteSpace: 'nowrap',
|
||||
overflowX: 'hidden',
|
||||
maxWidth: 'calc(100% - 70px)',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
'&:last-child': {
|
||||
'border-bottom-width': 0,
|
||||
},
|
||||
|
||||
overflow: 'hidden',
|
||||
maxHeight: 47,
|
||||
'border-bottom-color': map.BORDER_COLOR,
|
||||
},
|
||||
|
||||
queryListItemKey: {
|
||||
display: '-webkit-box',
|
||||
boxOrient: 'vertical',
|
||||
'-webkit-line-clamp': 2,
|
||||
whiteSpace: 'normal',
|
||||
overflow: 'hidden',
|
||||
maxWidth: 'calc(100% - 70px)',
|
||||
wordBreak: 'break-all',
|
||||
},
|
||||
|
||||
queryListHeader: {
|
||||
display: 'flex',
|
||||
padding: 4,
|
||||
|
@ -162,8 +166,13 @@ const getSheetFromColorMap = (map: ColorMap) => {
|
|||
},
|
||||
|
||||
tabSelector: {
|
||||
display: 'inline-flex',
|
||||
float: 'right',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-end',
|
||||
overflow: 'hidden',
|
||||
'& > *': {
|
||||
flex: '0 1 auto',
|
||||
},
|
||||
},
|
||||
|
||||
srOnly: {
|
||||
|
@ -180,7 +189,10 @@ const getSheetFromColorMap = (map: ColorMap) => {
|
|||
selectorButton: {
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
padding: '6.5px 8px',
|
||||
height: '33px',
|
||||
padding: '0 8px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
color: map.TEXT_COLOR,
|
||||
'border-style': 'solid',
|
||||
'border-width': '1px',
|
||||
|
@ -204,6 +216,16 @@ const getSheetFromColorMap = (map: ColorMap) => {
|
|||
},
|
||||
|
||||
'border-color': map.TAB_BORDER_COLOR,
|
||||
|
||||
'& > *': {
|
||||
display: '-webkit-box',
|
||||
boxOrient: 'vertical',
|
||||
'-webkit-line-clamp': 1,
|
||||
overflow: 'hidden',
|
||||
wordBreak: 'break-all',
|
||||
'-webkit-box-pack': 'end',
|
||||
paddingBottom: 0,
|
||||
},
|
||||
},
|
||||
|
||||
selectorButtonSmall: {
|
||||
|
|
Loading…
Reference in New Issue
Block a user