diff --git a/web/navigation-sidebar/navigation-sidebar-constants.js b/web/navigation-sidebar/navigation-sidebar-constants.js --- a/web/navigation-sidebar/navigation-sidebar-constants.js +++ b/web/navigation-sidebar/navigation-sidebar-constants.js @@ -1,5 +1,9 @@ // @flow +export const navigationSidebarTooltipContainerStyle = { + marginLeft: 24, +}; + export const navigationSidebarTooltipStyle = { paddingTop: 8, paddingBottom: 8, diff --git a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js --- a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js +++ b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js @@ -2,7 +2,10 @@ import * as React from 'react'; -import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js'; +import { + navigationSidebarTooltipContainerStyle, + navigationSidebarTooltipStyle, +} from './navigation-sidebar-constants.js'; import css from './navigation-sidebar-tooltip.css'; type Props = { @@ -13,7 +16,10 @@ const { tooltipLabel } = props; return ( -
+
{tooltipLabel} diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js --- a/web/utils/tooltip-utils.js +++ b/web/utils/tooltip-utils.js @@ -12,6 +12,10 @@ reactionSeeMoreLabel, } from '../chat/chat-constants.js'; import type { PositionInfo } from '../chat/position-types.js'; +import { + navigationSidebarTooltipContainerStyle, + navigationSidebarTooltipStyle, +} from '../navigation-sidebar/navigation-sidebar-constants.js'; import { calculateMaxTextWidth } from '../utils/text-utils.js'; export const tooltipPositions = Object.freeze({ @@ -407,9 +411,33 @@ }; } +function calculateNavigationSidebarTooltipSize( + tooltipLabel: string, +): TooltipSize { + const { marginLeft } = navigationSidebarTooltipContainerStyle; + const { + paddingLeft, + paddingRight, + paddingTop, + paddingBottom, + height: contentHeight, + } = navigationSidebarTooltipStyle; + + const tooltipLabelTextWidth = calculateMaxTextWidth([tooltipLabel], 14); + + const width = marginLeft + paddingLeft + tooltipLabelTextWidth + paddingRight; + const height = paddingTop + contentHeight + paddingBottom; + + return { + width, + height, + }; +} + export { findTooltipPosition, getTooltipPositionStyle, calculateMessageTooltipSize, calculateReactionTooltipSize, + calculateNavigationSidebarTooltipSize, };