From 09abc46102ae8429d3ce76a85a11265663969ac2 Mon Sep 17 00:00:00 2001 From: Rahul Tripathi Date: Fri, 23 Jun 2023 03:23:01 +0530 Subject: [PATCH] Correct highlight bar css object conditional. --- .../web/components/patterns/HighlightBar.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx index ad1aff3f3..98a92a39a 100644 --- a/packages/web/components/patterns/HighlightBar.tsx +++ b/packages/web/components/patterns/HighlightBar.tsx @@ -43,19 +43,19 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element { borderRadius: '4px', border: '1px solid $grayBorder', boxShadow: theme.shadows.cardBoxShadow.toString(), - bottom: props.displayAtBottom - ? 'calc(38px + env(safe-area-inset-bottom, 40px))' - : undefined, - '@smDown': props.displayAtBottom - ? { - maxWidth: '85%', - bottom: `calc(28px + ${ - isAndroid() ? 30 : 0 - }px + env(safe-area-inset-bottom, 40px))`, - } - : undefined, - left: props.displayAtBottom ? undefined : props.anchorCoordinates.pageX, - top: props.displayAtBottom ? undefined : props.anchorCoordinates.pageY, + ...(props.displayAtBottom && { + bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))', + }), + ...(props.displayAtBottom && { + '@smDown': { + maxWidth: '85%', + bottom: `calc(28px + ${ + isAndroid() ? 30 : 0 + }px + env(safe-area-inset-bottom, 40px))`, + }, + }), + ...(!props.displayAtBottom && { left: props.anchorCoordinates.pageX }), + ...(!props.displayAtBottom && { top: props.anchorCoordinates.pageY }), }} >