diff --git a/src/design-system/styles/core.css.ts b/src/design-system/styles/core.css.ts index 6b3679479f..3288b93e01 100644 --- a/src/design-system/styles/core.css.ts +++ b/src/design-system/styles/core.css.ts @@ -438,7 +438,7 @@ const boxBaseProperties = defineProperties({ bottom: positionSpace, cursor: cursorOpts, display: ['none', 'flex', 'block', 'inline'], - flexDirection: ['row', 'column', 'column-reverse'], + flexDirection: ['row', 'column', 'column-reverse', 'row-reverse'], flexWrap: ['wrap'], flexBasis: ['0'], flexGrow: ['0', '1'], diff --git a/src/entries/popup/pages/walletReady/index.tsx b/src/entries/popup/pages/walletReady/index.tsx index a5b3bfe6d5..32d17ace3b 100644 --- a/src/entries/popup/pages/walletReady/index.tsx +++ b/src/entries/popup/pages/walletReady/index.tsx @@ -30,17 +30,20 @@ const PinToToolbar = () => { position="fixed" borderRadius="16px" style={{ - ...(!isArc && { - borderTopLeftRadius: 0, - borderTopRightRadius: 0, - right: isBrave ? '144px' : '104px', - }), + ...(isArc + ? { top: '8px', left: '8px' } + : { + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + right: isBrave ? '144px' : '104px', + top: '0', + }), maxWidth: '152px', - top: isArc ? '95px' : '0', }} paddingHorizontal="12px" paddingVertical="16px" display="flex" + flexDirection={isArc ? 'row-reverse' : 'row'} gap="12px" background="surfacePrimaryElevated" borderColor="buttonStrokeSecondary" @@ -50,7 +53,7 @@ const PinToToolbar = () => { {i18n.t('wallet_ready.pin_rainbow_to_your_toolbar')}