From 60bf50b2d5cfda28b21795cabcac4ca57292fb8c Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 8 Jul 2024 11:31:22 +0800 Subject: [PATCH 1/2] fix: font size and line height for text component --- public/assets/icons/IcClose.svg | 5 +++++ src/components/flyout/flyout-block-group.tsx | 2 +- src/components/flyout/flyout.tsx | 2 +- src/components/journal/journal.tsx | 10 +++++----- src/components/shared_ui/checkbox/checkbox.tsx | 6 +++--- .../contract-card-items/contract-card-footer.tsx | 2 +- .../contract-card-items/lookbacks-card-body.tsx | 2 +- .../result-overlay/result-overlay.tsx | 2 +- .../shared_ui/currency-badge/currency-badge.tsx | 2 +- .../shared_ui/mobile-dialog/mobile-dialog.tsx | 2 +- .../mobile-full-page-modal.tsx | 2 +- src/components/shared_ui/popover/popover.tsx | 2 +- .../shared_ui/select-native/select-native.tsx | 2 +- src/components/shared_ui/text/text.tsx | 8 ++++---- src/components/summary/summary-card.tsx | 2 +- src/components/transactions/transactions.tsx | 4 ++-- src/pages/dashboard/cards.tsx | 5 +++-- src/pages/dashboard/dashboard.tsx | 15 ++++----------- src/pages/dashboard/info-panel.tsx | 11 ++++------- .../dashboard/load-bot-preview/delete-dialog.tsx | 4 ++-- .../dashboard/load-bot-preview/icon-radio.tsx | 4 ++-- .../load-bot-preview/recent-workspace.tsx | 8 ++++---- .../dashboard/load-bot-preview/save-modal.tsx | 4 ++-- src/pages/dashboard/stop-bot-modal-content.tsx | 14 +++++++------- src/pages/dashboard/user-guide.tsx | 2 +- .../no-search-result-found/no-search-result.tsx | 6 +++--- .../bot-builder-tour/bot-builder-tour-mobile.tsx | 2 +- .../tutorials/dbot-tours/common/accordion.tsx | 2 +- .../tutorials/dbot-tours/common/tour-button.tsx | 2 +- .../tutorials/dbot-tours/common/tour-steps.tsx | 6 +++--- .../onboarding-tour/onboarding-tour-mobile.tsx | 6 +++--- src/pages/tutorials/faq-content/index.tsx | 6 +++--- .../tutorials/guide-content/guide-content.tsx | 8 ++++---- .../quick-strategy-guides-details.tsx | 10 +++++----- .../quick-strategy-guides.tsx | 2 +- src/utils/tmp/dummy.tsx | 4 ++++ 36 files changed, 88 insertions(+), 88 deletions(-) create mode 100644 public/assets/icons/IcClose.svg diff --git a/public/assets/icons/IcClose.svg b/public/assets/icons/IcClose.svg new file mode 100644 index 00000000..f1c68242 --- /dev/null +++ b/public/assets/icons/IcClose.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/flyout/flyout-block-group.tsx b/src/components/flyout/flyout-block-group.tsx index 4396e703..84b5ba46 100644 --- a/src/components/flyout/flyout-block-group.tsx +++ b/src/components/flyout/flyout-block-group.tsx @@ -43,7 +43,7 @@ const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_disp
{display_name} diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index d5afa4d5..df382099 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -82,7 +82,7 @@ const FlyoutContent = (props: TFlyoutContent) => { )} {is_empty ? (
- + {localize('No results found')}
diff --git a/src/components/journal/journal.tsx b/src/components/journal/journal.tsx index b432ef83..a9ecedbe 100644 --- a/src/components/journal/journal.tsx +++ b/src/components/journal/journal.tsx @@ -66,28 +66,28 @@ const Journal = observer(() => { weight='bold' align='center' color='less-prominent' - line_height='xxs' + lineHeight='xs' className='journal-empty__header' > {localize('There are no messages to display')}
- + {localize('Here are the possible reasons:')}
  • - + {localize('The bot is not running')}
  • - + {localize('The stats are cleared')}
  • - + {localize('All messages are filtered out')}
    • diff --git a/src/components/shared_ui/checkbox/checkbox.tsx b/src/components/shared_ui/checkbox/checkbox.tsx index b5166922..e7e91a67 100644 --- a/src/components/shared_ui/checkbox/checkbox.tsx +++ b/src/components/shared_ui/checkbox/checkbox.tsx @@ -18,7 +18,7 @@ type TCheckBoxProps = Omit, 'value' | 'label'> value?: boolean; withTabIndex?: number; has_error?: boolean; - label_line_height?: string; + label_lineHeight?: string; }; const Checkbox = React.forwardRef( @@ -30,7 +30,7 @@ const Checkbox = React.forwardRef( id, label, label_font_size = 'xs', - label_line_height = 'unset', + label_lineHeight = 'unset', defaultChecked, onChange, // This needs to be here so it's not included in `otherProps` value = false, @@ -93,7 +93,7 @@ const Checkbox = React.forwardRef(
- + {getPayoutLimit(contract_type, multiplier)} diff --git a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx b/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx index 929b20ae..680d8716 100644 --- a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx +++ b/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx @@ -89,7 +89,7 @@ const ResultOverlay = ({ diff --git a/src/components/shared_ui/currency-badge/currency-badge.tsx b/src/components/shared_ui/currency-badge/currency-badge.tsx index 732a33a4..0b0961e6 100644 --- a/src/components/shared_ui/currency-badge/currency-badge.tsx +++ b/src/components/shared_ui/currency-badge/currency-badge.tsx @@ -7,7 +7,7 @@ type TCurrencyBadgeProps = { }; const CurrencyBadge = ({ currency }: TCurrencyBadgeProps) => ( - + {getCurrencyDisplayCode(currency)} ); diff --git a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx b/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx index 9828501a..2695a640 100644 --- a/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx +++ b/src/components/shared_ui/mobile-dialog/mobile-dialog.tsx @@ -128,7 +128,7 @@ const MobileDialog = (props: React.PropsWithChildren) => { size='xs' color='prominent' weight='bold' - line_height='unset' + lineHeight='unset' className='dc-mobile-dialog__title' > {renderTitle ? renderTitle() : title} diff --git a/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx b/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx index 920fe2b5..0c5181bb 100644 --- a/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx +++ b/src/components/shared_ui/mobile-full-page-modal/mobile-full-page-modal.tsx @@ -93,7 +93,7 @@ const MobileFullPageModal = ({ {renderPageHeader && renderPageHeader()}
{renderPageHeaderElement ?? ( - + {page_header_text} )} diff --git a/src/components/shared_ui/popover/popover.tsx b/src/components/shared_ui/popover/popover.tsx index b8fda5b9..c27f1a5b 100644 --- a/src/components/shared_ui/popover/popover.tsx +++ b/src/components/shared_ui/popover/popover.tsx @@ -200,7 +200,7 @@ const Popover = ({ {message} )) || ( - + {message} )} diff --git a/src/components/shared_ui/select-native/select-native.tsx b/src/components/shared_ui/select-native/select-native.tsx index 0df56abc..004a7410 100644 --- a/src/components/shared_ui/select-native/select-native.tsx +++ b/src/components/shared_ui/select-native/select-native.tsx @@ -216,7 +216,7 @@ const SelectNative = ({ as='p' color='less-prominent' size='xxs' - line_height='l' + LineHeight='lg' className={classNames('dc-select-native__hint', classNameHint)} > {hint} diff --git a/src/components/shared_ui/text/text.tsx b/src/components/shared_ui/text/text.tsx index 69ba54a4..1bcb1cca 100644 --- a/src/components/shared_ui/text/text.tsx +++ b/src/components/shared_ui/text/text.tsx @@ -6,7 +6,7 @@ import { isEmptyObject } from '@/components/shared'; type TTextProps = Omit, 'size'> & { align?: string; weight?: string; - line_height?: string; + lineHeight?: string; styles?: CSSProperties; size?: string; }; @@ -17,7 +17,7 @@ const Text = ({ color = 'general', align = 'left', weight = 'normal', - line_height = 'm', + lineHeight = 'm', as, className, styles, @@ -26,7 +26,7 @@ const Text = ({ const class_styles = { '--text-size': `var(--text-size-${size})`, '--text-color': `var(--text-${color})`, - '--text-lh': `var(--text-lh-${line_height})`, + '--text-lh': `var(--text-lh-${lineHeight})`, '--text-weight': `var(--text-weight-${weight})`, '--text-align': `var(--text-align-${align})`, }; @@ -39,7 +39,7 @@ const Text = ({ setStyle(class_styles); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [size, color, line_height, weight, align]); + }, [size, color, lineHeight, weight, align]); const class_names = classNames('dc-text', className); return React.createElement(as || 'span', { className: class_names, style, ...props }, children); }; diff --git a/src/components/summary/summary-card.tsx b/src/components/summary/summary-card.tsx index 18c473f4..6b987a7d 100644 --- a/src/components/summary/summary-card.tsx +++ b/src/components/summary/summary-card.tsx @@ -97,7 +97,7 @@ const SummaryCard = observer(({ contract_info, is_contract_loading }: TSummaryCa )} {!is_contract_loading && !contract_info && ( - + {localize('When you’re ready to trade, hit ')} {localize('Run')} {localize('. You’ll be able to track your bot’s performance here.')} diff --git a/src/components/transactions/transactions.tsx b/src/components/transactions/transactions.tsx index 748ee353..c31774cd 100644 --- a/src/components/transactions/transactions.tsx +++ b/src/components/transactions/transactions.tsx @@ -200,13 +200,13 @@ const Transactions = observer(({ is_drawer_open }: TTransactions) => { weight='bold' align='center' color='less-prominent' - line_height='xxs' + lineHeight='xs' className='transactions-empty__header' > {localize('There are no transactions to display')}
- + {localize('Here are the possible reasons:')}
    diff --git a/src/pages/dashboard/cards.tsx b/src/pages/dashboard/cards.tsx index c7dcac0e..65f502bf 100644 --- a/src/pages/dashboard/cards.tsx +++ b/src/pages/dashboard/cards.tsx @@ -3,6 +3,7 @@ import React from 'react'; import classNames from 'classnames'; import { observer } from 'mobx-react-lite'; +import { localize } from '@deriv-com/translations'; import { Dialog, Text } from '@deriv-com/ui'; import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils'; @@ -11,7 +12,7 @@ import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal'; import MobileWrapper from '@/components/shared_ui/mobile-wrapper'; import { DBOT_TABS } from '@/constants/bot-contents'; import { useStore } from '@/hooks/useStore'; -import { Icon, localize } from '@/utils/tmp/dummy'; +import { Icon } from '@/utils/tmp/dummy'; import { rudderStackSendQsOpenEventFromDashboard } from '../bot-builder/quick-strategy/analytics/rudderstack-quick-strategy'; @@ -129,7 +130,7 @@ const Cards = observer(({ is_mobile, has_dashboard_strategies }: TCardProps) => method(); }} /> - + {content}
diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 6581aeb8..1a070327 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -2,10 +2,10 @@ import React from 'react'; import classNames from 'classnames'; import { observer } from 'mobx-react-lite'; +import { localize } from '@deriv-com/translations'; import { Text } from '@deriv-com/ui'; import { useStore } from '@/hooks/useStore'; -import { localize } from '@/utils/tmp/dummy'; import OnboardTourHandler from '../tutorials/dbot-tours/onboarding-tour'; @@ -45,22 +45,15 @@ const DashboardComponent = observer(({ handleTabChange }: TMobileIconGuide) => { })} > {!has_dashboard_strategies && ( - + {localize('Load or build your bot')} )} {localize( diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx index 10756b82..d2cbefc2 100644 --- a/src/pages/dashboard/info-panel.tsx +++ b/src/pages/dashboard/info-panel.tsx @@ -12,9 +12,6 @@ import { Icon } from '@/utils/tmp/dummy'; import { SIDEBAR_INTRO } from './constants'; const InfoPanel = observer(() => { - const { - ui: { is_mobile }, - } = useStore(); const { dashboard } = useStore(); const { active_tour, @@ -42,14 +39,14 @@ const InfoPanel = observer(() => { const renderInfo = () => (
- +
{SIDEBAR_INTRO.map(sidebar_item => { const { label, content, link } = sidebar_item; return (
- + {label} {content.map(text => ( @@ -59,10 +56,10 @@ const InfoPanel = observer(() => { 'db-info-panel__content': link, })} color='prominent' - line_height='xl' + lineHeight='3xl' as='p' onClick={() => switchTab(link, label, text.faq_id)} - size={is_mobile ? 'xxs' : 's'} + size='sm' > {text.data} diff --git a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx b/src/pages/dashboard/load-bot-preview/delete-dialog.tsx index 63facb06..25cf3ea0 100644 --- a/src/pages/dashboard/load-bot-preview/delete-dialog.tsx +++ b/src/pages/dashboard/load-bot-preview/delete-dialog.tsx @@ -82,13 +82,13 @@ const DeleteDialog = observer(() => { has_close_icon >
- + {localize('Your bot will be permanently deleted when you hit ')} {localize('Yes, delete.')}
- + {localize('Are you sure you want to delete it?')}
diff --git a/src/pages/dashboard/load-bot-preview/icon-radio.tsx b/src/pages/dashboard/load-bot-preview/icon-radio.tsx index 02ce09aa..aebf716f 100644 --- a/src/pages/dashboard/load-bot-preview/icon-radio.tsx +++ b/src/pages/dashboard/load-bot-preview/icon-radio.tsx @@ -31,9 +31,9 @@ const IconRadio = ({ icon, text, google_drive_connected, onDriveConnect }: TIcon {localize(text)} diff --git a/src/pages/dashboard/load-bot-preview/recent-workspace.tsx b/src/pages/dashboard/load-bot-preview/recent-workspace.tsx index 3c942d03..7d2a74a2 100644 --- a/src/pages/dashboard/load-bot-preview/recent-workspace.tsx +++ b/src/pages/dashboard/load-bot-preview/recent-workspace.tsx @@ -136,7 +136,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => { }; const is_active_mobile = selected_strategy_id === workspace.id && is_dropdown_visible; - const text_size = is_desktop ? 'xs' : 'xxs'; + const text_size = 'xs'; return (
{ >
- + {workspace.name}
- + {timeSince(workspace.timestamp)}
@@ -174,7 +174,7 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => { })} />
- + {getSaveType(workspace.save_type)}
diff --git a/src/pages/dashboard/load-bot-preview/save-modal.tsx b/src/pages/dashboard/load-bot-preview/save-modal.tsx index d1350927..1238fff8 100644 --- a/src/pages/dashboard/load-bot-preview/save-modal.tsx +++ b/src/pages/dashboard/load-bot-preview/save-modal.tsx @@ -58,7 +58,7 @@ const SaveModalForm = ({
- + {localize( 'Enter your bot name, choose to save on your computer or Google Drive, and hit ' )} @@ -126,7 +126,7 @@ const SaveModalForm = ({ onChange={() => setFieldValue('save_as_collection', !save_as_collection)} defaultChecked={save_as_collection} label={ - + } diff --git a/src/pages/dashboard/stop-bot-modal-content.tsx b/src/pages/dashboard/stop-bot-modal-content.tsx index ae68b19e..2f675714 100644 --- a/src/pages/dashboard/stop-bot-modal-content.tsx +++ b/src/pages/dashboard/stop-bot-modal-content.tsx @@ -46,28 +46,28 @@ const StopBotModalContent = ({ > {is_running && is_multiplier ? ( <> - + - + - + ) : ( <> - + - + - + - + diff --git a/src/pages/dashboard/user-guide.tsx b/src/pages/dashboard/user-guide.tsx index f28f07a8..41231d1d 100644 --- a/src/pages/dashboard/user-guide.tsx +++ b/src/pages/dashboard/user-guide.tsx @@ -24,7 +24,7 @@ const UserGuide: React.FC = ({ is_mobile, handleTabChange, setActive > {!is_mobile && ( - + {localize('User Guide')} )} diff --git a/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx b/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx index 555263b2..1107d38f 100644 --- a/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx +++ b/src/pages/tutorials/common/no-search-result-found/no-search-result.tsx @@ -11,13 +11,13 @@ const NoSearchResult = observer(() => { return (
- + - + - +
diff --git a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx index 2490309c..2db850de 100644 --- a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx +++ b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx @@ -63,7 +63,7 @@ const BotBuilderTourMobile = observer(() => {
- + {content_data?.content}
diff --git a/src/pages/tutorials/dbot-tours/common/accordion.tsx b/src/pages/tutorials/dbot-tours/common/accordion.tsx index a5e685e3..27738ed6 100644 --- a/src/pages/tutorials/dbot-tours/common/accordion.tsx +++ b/src/pages/tutorials/dbot-tours/common/accordion.tsx @@ -89,7 +89,7 @@ const Accordion = ({ })} data-testid='accordion-content' > - + {content}
diff --git a/src/pages/tutorials/dbot-tours/common/tour-button.tsx b/src/pages/tutorials/dbot-tours/common/tour-button.tsx index cb02e9d8..70ac1602 100644 --- a/src/pages/tutorials/dbot-tours/common/tour-button.tsx +++ b/src/pages/tutorials/dbot-tours/common/tour-button.tsx @@ -10,7 +10,7 @@ const TourButton = ({ label, type = 'default', ...props }: TTourButton) => { if (!label) return null; return ( diff --git a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx index 4a9d5132..8daefda6 100644 --- a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx +++ b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx @@ -21,14 +21,14 @@ const TourSteps = observer(
{show_actions && (
- + {step_index}/6
)}
- + {label}
@@ -54,7 +54,7 @@ const TourSteps = observer( content_data ) : (
- + {content_data}
diff --git a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx index 65de873e..f1a26830 100644 --- a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx +++ b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx @@ -66,7 +66,7 @@ const OnboardingTourMobile = observer(() => { {`${tour_step_key - 1}/7`} @@ -87,7 +87,7 @@ const OnboardingTourMobile = observer(() => { align='center' className='dbot-slider__title' as='span' - line_height='s' + LineHeight='sm' size='xs' > {localize(header)} @@ -123,7 +123,7 @@ const OnboardingTourMobile = observer(() => { color='prominent' className='dbot-slider__content' as='div' - line_height='s' + LineHeight='sm' size='xxs' > {data} diff --git a/src/pages/tutorials/faq-content/index.tsx b/src/pages/tutorials/faq-content/index.tsx index 1398ceac..c1f42b3b 100644 --- a/src/pages/tutorials/faq-content/index.tsx +++ b/src/pages/tutorials/faq-content/index.tsx @@ -26,7 +26,7 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) = { header: ( { <> @@ -96,7 +96,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: {content} @@ -115,7 +115,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: align='left' weight='bold' color='prominent' - line_height='s' + LineHeight='sm' size={is_mobile ? 'xs' : 's'} > @@ -153,7 +153,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: {content} diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx index c532b804..7426a574 100644 --- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx +++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx @@ -51,7 +51,7 @@ const QuickStrategyGuidesDetail = observer( align='center' weight='bold' color='prominent' - line_height='s' + LineHeight='sm' size={text_size} > {type} @@ -64,7 +64,7 @@ const QuickStrategyGuidesDetail = observer( @@ -88,7 +88,7 @@ const QuickStrategyGuidesDetail = observer( { @@ -97,11 +97,11 @@ const QuickStrategyGuidesDetail = observer( > '} /> - +
- + diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx index 69d55537..398eab41 100644 --- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx +++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx @@ -23,7 +23,7 @@ const QuickStrategyGuides = () => { className='tutorials-quick-strategy__title' weight='bold' color='prominent' - line_height='s' + LineHeight='sm' size={is_mobile ? 'xs' : 's'} as='div' > diff --git a/src/utils/tmp/dummy.tsx b/src/utils/tmp/dummy.tsx index 9d499259..f2c3797d 100644 --- a/src/utils/tmp/dummy.tsx +++ b/src/utils/tmp/dummy.tsx @@ -32,6 +32,10 @@ type TIconComponent = { icon: string; className?: string; onClick?: () => void; + size?: number; + height?: number | string; + width?: number | string; + id?: string; }; const IconComponent: React.FC = ({ icon, ...rest }) => { From b23337d9541af8c9fd3a66c876f55a5d26d470db Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 8 Jul 2024 12:15:23 +0800 Subject: [PATCH 2/2] fix: :fire: chart width fix --- src/pages/main/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/main/main.scss b/src/pages/main/main.scss index 20948df9..c99cdab1 100644 --- a/src/pages/main/main.scss +++ b/src/pages/main/main.scss @@ -244,7 +244,7 @@ } &--expanded { - width: calc(100vw - 39.8rem); + width: calc(100vw - 41.4rem); } &--modal {