diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx index daeba804..783b1f01 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx @@ -54,8 +54,11 @@ const AddPost = () => { return ( - - Post name + + Post name { isSelected )} > -

{queryInfo.queryKey}

+

{queryInfo.queryKey}

{queryInfo.query.status}

); diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx index 710575cd..d1659e74 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx @@ -37,7 +37,9 @@ export class QueryPreviewHeader extends React.Component tab.value === selectedTab )} > - {renderTabLabel ? renderTabLabel(tab) : tab.label} + + {renderTabLabel ? renderTabLabel(tab) : tab.label} + ))} diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts index 27b351df..0390a62c 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts @@ -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: {