diff --git a/src/app/views/main-header/Help.tsx b/src/app/views/main-header/Help.tsx index 395ba39e6..39fbc26de 100644 --- a/src/app/views/main-header/Help.tsx +++ b/src/app/views/main-header/Help.tsx @@ -91,7 +91,7 @@ export const Help = () => { const calloutStyles: React.CSSProperties = { overflowY: 'hidden' } - const helpButtonStyles = mainHeaderStyles(currentTheme).iconButton; + const { iconButton: helpButtonStyles, tooltipStyles } = mainHeaderStyles(currentTheme); const menuProperties = { shouldFocusOnMount: true, @@ -108,6 +108,7 @@ export const Help = () => { content={translateMessage('Help')} id={getId()} calloutProps={{ gapSpace: 0 }} + styles={ tooltipStyles } > { }, feedbackIconAdjustmentStyles: { position: 'relative' as 'relative', - right: '-6px', top: '4px' }, tenantStyles: { @@ -32,7 +31,24 @@ export const mainHeaderStyles = (theme: ITheme) => { width: '50px', ':hover': { background: `${theme.palette.neutralLight} !important` - } + }, + flexGrow: '1' + } + }, + moreInformationStyles: { + flexGrow: 1, + flexShrink: 1, + flexBasis: '60px' + }, + settingsContainerStyles: { + display: 'flex', + alignItems: 'stretch' + }, + tooltipStyles: { + root: { + flexGrow: 1, + display: 'flex', + alignItems: 'stretch' } } } diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx index 7ce803528..09dc6de47 100644 --- a/src/app/views/main-header/MainHeader.tsx +++ b/src/app/views/main-header/MainHeader.tsx @@ -43,7 +43,7 @@ export const MainHeader: React.FunctionComponent = (props: Mai const mobileScreen = props.mobileScreen; const currentTheme = getTheme(); const { rootStyles : itemAlignmentStackStyles, rightItemsStyles, - feedbackIconAdjustmentStyles, tenantStyles } = mainHeaderStyles(currentTheme); + feedbackIconAdjustmentStyles, tenantStyles, moreInformationStyles } = mainHeaderStyles(currentTheme); return ( @@ -98,9 +98,9 @@ export const MainHeader: React.FunctionComponent = (props: Mai style={tenantStyles} /> } - - - + + + diff --git a/src/app/views/main-header/settings/Settings.tsx b/src/app/views/main-header/settings/Settings.tsx index 8dae1f67a..9855f9be4 100644 --- a/src/app/views/main-header/settings/Settings.tsx +++ b/src/app/views/main-header/settings/Settings.tsx @@ -92,7 +92,8 @@ export const Settings: React.FunctionComponent = () => { overflowY: 'hidden' } - const settingsButtonStyles = mainHeaderStyles(currentTheme).iconButton; + const { iconButton : settingsButtonStyles, settingsContainerStyles, + tooltipStyles} = mainHeaderStyles(currentTheme); const menuProperties = { shouldFocusOnMount: true, @@ -104,11 +105,12 @@ export const Settings: React.FunctionComponent = () => { }; return ( -
+