From 9fd9f1a95e828b37f95ded892fb458f8fd5e4362 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 30 Jan 2026 12:48:55 -0500 Subject: [PATCH 1/8] feat(ui): RTL support --- packages/clerk-js/sandbox/template.html | 5 ++++- .../ui/src/common/NotificationCountBadge.tsx | 2 +- .../src/components/APIKeys/ApiKeysTable.tsx | 4 ++-- .../components/APIKeys/CopyAPIKeyModal.tsx | 2 +- .../APIKeys/RevokeAPIKeyConfirmationModal.tsx | 2 +- .../CreateOrganizationForm.tsx | 6 ++--- .../src/components/ImpersonationFab/index.tsx | 4 ++-- .../components/OAuthConsent/OAuthConsent.tsx | 4 ++-- .../OrganizationProfile/ActiveMembersList.tsx | 2 +- .../InvitedMembersList.tsx | 2 +- .../OrganizationProfile/MembersActions.tsx | 2 +- .../OrganizationProfileAvatarUploader.tsx | 2 +- .../OrganizationProfile/RequestToJoinList.tsx | 2 +- .../OrganizationSwitcherTrigger.tsx | 2 +- .../PricingTable/PricingTableDefault.tsx | 2 +- .../src/components/Statements/Statement.tsx | 2 +- .../Subscriptions/SubscriptionsList.tsx | 4 ++-- .../components/UserButton/SessionActions.tsx | 2 +- .../UserProfile/MfaBackupCodeList.tsx | 8 +++---- .../UserProfile/MfaPhoneCodeScreen.tsx | 2 +- packages/ui/src/elements/Actions.tsx | 2 +- packages/ui/src/elements/Alert.tsx | 2 +- .../elements/Card/CardClerkAndPagesTag.tsx | 3 +-- packages/ui/src/elements/FieldControl.tsx | 4 ++-- packages/ui/src/elements/InputGroup.tsx | 12 +++++----- packages/ui/src/elements/InputWithIcon.tsx | 4 ++-- .../ui/src/elements/LegalConsentCheckbox.tsx | 4 ++-- packages/ui/src/elements/Navbar.tsx | 12 +++++----- .../ui/src/elements/OrganizationPreview.tsx | 4 ++-- packages/ui/src/elements/PasswordInput.tsx | 6 ++--- packages/ui/src/elements/PhoneInput/index.tsx | 16 +++++++------- packages/ui/src/elements/PreviewButton.tsx | 2 +- packages/ui/src/elements/Select.tsx | 4 ++-- packages/ui/src/elements/SuccessPage.tsx | 2 +- packages/ui/src/elements/Switch.tsx | 2 +- packages/ui/src/elements/TagInput.tsx | 4 ++-- packages/ui/src/elements/UserPreview.tsx | 4 ++-- packages/ui/src/primitives/AlertIcon.tsx | 2 +- packages/ui/src/primitives/Badge.tsx | 2 +- packages/ui/src/primitives/Button.tsx | 2 +- packages/ui/src/primitives/FormErrorText.tsx | 2 +- .../ui/src/primitives/FormSuccessText.tsx | 2 +- packages/ui/src/primitives/Table.tsx | 22 +++++++++---------- packages/ui/src/primitives/Th.tsx | 2 +- 44 files changed, 92 insertions(+), 90 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 4983019bdf9..cae088d5fb6 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -1,5 +1,8 @@ - + clerk-js Sandbox diff --git a/packages/ui/src/common/NotificationCountBadge.tsx b/packages/ui/src/common/NotificationCountBadge.tsx index 97d27ac6757..7fb99e121af 100644 --- a/packages/ui/src/common/NotificationCountBadge.tsx +++ b/packages/ui/src/common/NotificationCountBadge.tsx @@ -32,7 +32,7 @@ export const NotificationCountBadge = (props: NotificationCountBadgeProps) => { as='span' sx={[ t => ({ - marginLeft: t.space.$1x5, + marginInlineStart: t.space.$1x5, }), containerSx, ]} diff --git a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx index 819f65ecdc0..2584cf93bff 100644 --- a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx +++ b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx @@ -42,7 +42,7 @@ export const APIKeysTable = ({ Name Last used - {canManageAPIKeys && Actions} + {canManageAPIKeys && Actions} @@ -98,7 +98,7 @@ export const APIKeysTable = ({ {canManageAPIKeys && ( - + ({ - textAlign: 'left', + textAlign: 'start', padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`, })} > diff --git a/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx index a8aa6e1d6fb..c21e709931b 100644 --- a/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx +++ b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx @@ -74,7 +74,7 @@ export const RevokeAPIKeyConfirmationModal = ({ > ({ - textAlign: 'left', + textAlign: 'start', padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`, })} > diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx index 0bc7f29a13d..df71448620f 100644 --- a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx @@ -139,7 +139,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani headerSubtitle={props?.startPage?.headerSubtitle} headerTitleTextVariant={headerTitleTextVariant} headerSubtitleTextVariant={headerSubtitleTextVariant} - sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6, textAlign: 'left' })} + sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6, textAlign: 'start' })} > ({ minHeight: t.sizes.$60, textAlign: 'left' })} + sx={t => ({ minHeight: t.sizes.$60, textAlign: 'start' })} > {organization && ( { ({ width: '100%', - paddingLeft: t.sizes.$4, - paddingRight: t.sizes.$6, + paddingInlineStart: t.sizes.$4, + paddingInlineEnd: t.sizes.$6, whiteSpace: 'nowrap', })} > diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx index 8555248176f..e1e4a6bb18e 100644 --- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx +++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx @@ -112,7 +112,7 @@ export function OAuthConsentInternal() { ({ - textAlign: 'left', + textAlign: 'start', borderWidth: t.borderWidths.$normal, borderStyle: t.borderStyles.$solid, borderColor: t.colors.$borderAlpha100, @@ -157,7 +157,7 @@ export function OAuthConsentInternal() { background: t.colors.$colorMutedForeground, borderRadius: t.radii.$circle, transform: 'translateY(-0.1875rem)', - marginRight: t.space.$2, + marginInlineEnd: t.space.$2, flexShrink: 0, }, })} diff --git a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx index cfb28a0fa9f..ef713846990 100644 --- a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx +++ b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx @@ -125,7 +125,7 @@ const MemberRow = (props: { /> - + - + { justify={actionSlot ? 'between' : 'end'} sx={t => ({ width: '100%', - marginLeft: 'auto', + marginInlineStart: 'auto', padding: `${t.space.$none} ${t.space.$1}`, })} gap={actionSlot ? 2 : undefined} diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx index fa2c5133528..7717294f89c 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx @@ -21,7 +21,7 @@ export const OrganizationProfileAvatarUploader = ( ({ - textAlign: 'left', + textAlign: 'start', marginBottom: t.space.$2, })} localizationKey={localizationKeys('organizationProfile.start.profileSection.uploadAction__title')} diff --git a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx index e17f08f3980..24bfc86a93b 100644 --- a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx +++ b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx @@ -100,7 +100,7 @@ const RequestRow = withCardStateProvider( - + diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx index 6ed473f1c95..0f691733173 100644 --- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx +++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx @@ -82,7 +82,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( ({ marginLeft: `${t.space.$2}` })} + sx={t => ({ marginInlineStart: `${t.space.$2}` })} /> ); diff --git a/packages/ui/src/components/PricingTable/PricingTableDefault.tsx b/packages/ui/src/components/PricingTable/PricingTableDefault.tsx index 879ed453c3c..fd6397b82d1 100644 --- a/packages/ui/src/components/PricingTable/PricingTableDefault.tsx +++ b/packages/ui/src/components/PricingTable/PricingTableDefault.tsx @@ -157,7 +157,7 @@ function Card(props: CardProps) { borderColor: t.colors.$borderAlpha150, borderRadius: t.radii.$xl, overflow: 'hidden', - textAlign: 'left', + textAlign: 'start', })} data-variant={isCompact ? 'compact' : 'default'} > diff --git a/packages/ui/src/components/Statements/Statement.tsx b/packages/ui/src/components/Statements/Statement.tsx index 2cef2bc3e28..3400514a998 100644 --- a/packages/ui/src/components/Statements/Statement.tsx +++ b/packages/ui/src/components/Statements/Statement.tsx @@ -220,7 +220,7 @@ function SectionContentDetailsHeader({ {secondaryTitle && ( diff --git a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx index 8d19c89c08b..43dc1b4a052 100644 --- a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx +++ b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx @@ -178,7 +178,7 @@ function SubscriptionRow({ subscription, length }: { subscription: BillingSubscr /> ({ marginRight: t.sizes.$1 })} + sx={t => ({ marginInlineEnd: t.sizes.$1 })} > {subscription.plan.name} @@ -199,7 +199,7 @@ function SubscriptionRow({ subscription, length }: { subscription: BillingSubscr ({ - textAlign: 'right', + textAlign: 'end', })} > diff --git a/packages/ui/src/components/UserButton/SessionActions.tsx b/packages/ui/src/components/UserButton/SessionActions.tsx index cd2ec7e9d9d..2947759741e 100644 --- a/packages/ui/src/components/UserButton/SessionActions.tsx +++ b/packages/ui/src/components/UserButton/SessionActions.tsx @@ -170,7 +170,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => { > ({ marginLeft: t.space.$12, padding: `0 ${t.space.$5} ${t.space.$4}`, gap: t.space.$2 })} + sx={t => ({ marginInlineStart: t.space.$12, padding: `0 ${t.space.$5} ${t.space.$4}`, gap: t.space.$2 })} > { borderTopColor: t.colors.$borderAlpha100, gridTemplateColumns: `repeat(3, minmax(0, 1fr))`, '>:not([hidden])~:not([hidden])': { - borderRightWidth: '0px', - borderLeftWidth: '1px', + borderInlineEndWidth: '0px', + borderInlineStartWidth: '1px', borderStyle: 'solid', borderColor: t.colors.$borderAlpha100, }, '>:first-child': { - borderBottomLeftRadius: t.radii.$lg, + borderEndStartRadius: t.radii.$lg, }, '>:last-child': { - borderBottomRightRadius: t.radii.$lg, + borderEndEndRadius: t.radii.$lg, }, })} > diff --git a/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx b/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx index 52b4ea80701..01bf70c47ad 100644 --- a/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx +++ b/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx @@ -208,7 +208,7 @@ const AddMfa = (props: AddMfaProps) => { icon={ ({ marginRight: t.space.$2 })} + sx={t => ({ marginInlineEnd: t.space.$2 })} /> } localizationKey={localizationKeys('userProfile.mfaPhoneCodePage.primaryButton__addPhoneNumber')} diff --git a/packages/ui/src/elements/Actions.tsx b/packages/ui/src/elements/Actions.tsx index ca5959372a3..b7ef9f0e7df 100644 --- a/packages/ui/src/elements/Actions.tsx +++ b/packages/ui/src/elements/Actions.tsx @@ -217,7 +217,7 @@ export const Action = (props: ActionProps) => { size={spinnerSize || 'xs'} elementDescriptor={descriptors.spinner} sx={t => ({ - marginRight: t.space.$1, + marginInlineEnd: t.space.$1, })} /> ) : ( diff --git a/packages/ui/src/elements/Alert.tsx b/packages/ui/src/elements/Alert.tsx index ce0f13ee5a6..21270cdc5dc 100644 --- a/packages/ui/src/elements/Alert.tsx +++ b/packages/ui/src/elements/Alert.tsx @@ -39,7 +39,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => { elementDescriptor={descriptors.alertTextContainer} elementId={descriptors.alertTextContainer.setId(variant)} gap={1} - sx={{ textAlign: 'left' }} + sx={{ textAlign: 'start' }} > ({ gap: displayConfig.branded || withFooterPages ? t.space.$2 : 0, - marginLeft: 'auto', - marginRight: 'auto', + marginInline: 'auto', width: '100%', justifyContent: 'center', alignItems: 'center', diff --git a/packages/ui/src/elements/FieldControl.tsx b/packages/ui/src/elements/FieldControl.tsx index e3b6563540e..94995209229 100644 --- a/packages/ui/src/elements/FieldControl.tsx +++ b/packages/ui/src/elements/FieldControl.tsx @@ -98,13 +98,13 @@ const FieldLabelIcon = (props: { icon?: React.ComponentType }) => { as={'span'} title={t(localizationKeys('formFieldHintText__slug'))} sx={{ - marginRight: 'auto', + marginInlineEnd: 'auto', }} > ({ - marginLeft: theme.space.$0x5, + marginInlineStart: theme.space.$0x5, color: theme.colors.$neutralAlpha400, width: theme.sizes.$4, height: theme.sizes.$4, diff --git a/packages/ui/src/elements/InputGroup.tsx b/packages/ui/src/elements/InputGroup.tsx index 4bd63337fc3..6d8d9f6096c 100644 --- a/packages/ui/src/elements/InputGroup.tsx +++ b/packages/ui/src/elements/InputGroup.tsx @@ -16,18 +16,18 @@ export const InputGroup = forwardRef< const inputBorder = groupPrefix ? { - borderTopLeftRadius: '0', - borderBottomLeftRadius: '0', + borderStartStartRadius: '0', + borderEndStartRadius: '0', } : { - borderTopRightRadius: '0', - borderBottomRightRadius: '0', + borderStartEndRadius: '0', + borderEndEndRadius: '0', }; const textProps: ThemableCssProp = t => ({ paddingInline: t.space.$2, - borderTopRightRadius: '0', - borderBottomRightRadius: '0', + borderStartEndRadius: '0', + borderEndEndRadius: '0', width: 'fit-content', display: 'flex', alignItems: 'center', diff --git a/packages/ui/src/elements/InputWithIcon.tsx b/packages/ui/src/elements/InputWithIcon.tsx index 81242c2b78d..09e7d5329f1 100644 --- a/packages/ui/src/elements/InputWithIcon.tsx +++ b/packages/ui/src/elements/InputWithIcon.tsx @@ -20,7 +20,7 @@ export const InputWithIcon = React.forwardRef(( sx={theme => [ { position: 'absolute', - left: theme.space.$3x5, + insetInlineStart: theme.space.$3x5, width: theme.sizes.$3x5, height: theme.sizes.$3x5, pointerEvents: 'none', @@ -42,7 +42,7 @@ export const InputWithIcon = React.forwardRef(( sx={[ theme => ({ width: '100%', - paddingLeft: theme.space.$10, + paddingInlineStart: theme.space.$10, }), sx, ]} diff --git a/packages/ui/src/elements/LegalConsentCheckbox.tsx b/packages/ui/src/elements/LegalConsentCheckbox.tsx index fc72ff6ade8..fce2a7051e3 100644 --- a/packages/ui/src/elements/LegalConsentCheckbox.tsx +++ b/packages/ui/src/elements/LegalConsentCheckbox.tsx @@ -43,8 +43,8 @@ const LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: strin htmlFor={inputProps.id} isDisabled={inputProps.isDisabled} sx={t => ({ - paddingLeft: t.space.$1x5, - textAlign: 'left', + paddingInlineStart: t.space.$1x5, + textAlign: 'start', })} > diff --git a/packages/ui/src/elements/OrganizationPreview.tsx b/packages/ui/src/elements/OrganizationPreview.tsx index e1727fb75ff..472b9095393 100644 --- a/packages/ui/src/elements/OrganizationPreview.tsx +++ b/packages/ui/src/elements/OrganizationPreview.tsx @@ -69,7 +69,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => { sx={avatarSx} rounded={rounded} /> - {icon && {icon}} + {icon && {icon}} { direction='col' justify='center' as='span' - sx={{ minWidth: '0px', textAlign: 'left' }} + sx={{ minWidth: '0px', textAlign: 'start' }} > ((p //@ts-expect-error Type mismatch between ForwardRef and RefObject due to null ref={mergeRefs(ref, inputRef)} type={hidden ? 'password' : 'text'} - sx={theme => ({ paddingRight: theme.space.$10 })} + sx={theme => ({ paddingInlineEnd: theme.space.$10 })} /> ((p onClick={() => setHidden(s => !s)} sx={theme => ({ position: 'absolute', - right: 0, - marginRight: theme.space.$1, + insetInlineEnd: 0, + marginInlineEnd: theme.space.$1, color: theme.colors.$neutralAlpha400, })} icon={hidden ? Eye : EyeSlash} diff --git a/packages/ui/src/elements/PhoneInput/index.tsx b/packages/ui/src/elements/PhoneInput/index.tsx index d945b88f8b2..7882e0623be 100644 --- a/packages/ui/src/elements/PhoneInput/index.tsx +++ b/packages/ui/src/elements/PhoneInput/index.tsx @@ -116,9 +116,9 @@ const PhoneInputBase = forwardRef ({ borderWidth: '0', borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover - borderBottomRightRadius: '0', - borderTopRightRadius: '0', - paddingRight: t.space.$2, + borderEndEndRadius: '0', + borderStartEndRadius: '0', + paddingInlineEnd: t.space.$2, ':focus': { zIndex: 2, boxShadow: 'none', @@ -164,7 +164,7 @@ const PhoneInputBase = forwardRef @@ -188,9 +188,9 @@ const PhoneInputBase = forwardRef { /> {country.name} diff --git a/packages/ui/src/elements/PreviewButton.tsx b/packages/ui/src/elements/PreviewButton.tsx index 06a420ac938..8b3e0ccdaee 100644 --- a/packages/ui/src/elements/PreviewButton.tsx +++ b/packages/ui/src/elements/PreviewButton.tsx @@ -46,7 +46,7 @@ export const PreviewButton = (props: PreviewButtonProps) => { sx={[ t => ({ color: t.colors.$colorMutedForeground, - marginLeft: t.space.$2, + marginInlineStart: t.space.$2, visibility: showIconOnHover ? 'hidden' : 'initial', }), iconSx, diff --git a/packages/ui/src/elements/Select.tsx b/packages/ui/src/elements/Select.tsx index cd0d49d36bc..f91655ffe4c 100644 --- a/packages/ui/src/elements/Select.tsx +++ b/packages/ui/src/elements/Select.tsx @@ -407,8 +407,8 @@ export const SelectButton = ( sx={[ theme => ({ gap: theme.space.$2, - paddingLeft: theme.space.$3x5, - paddingRight: theme.space.$3x5, + paddingInlineStart: theme.space.$3x5, + paddingInlineEnd: theme.space.$3x5, alignItems: 'center', '> *': { pointerEvents: 'none' }, }), diff --git a/packages/ui/src/elements/SuccessPage.tsx b/packages/ui/src/elements/SuccessPage.tsx index 46f3841db59..1640bbe204f 100644 --- a/packages/ui/src/elements/SuccessPage.tsx +++ b/packages/ui/src/elements/SuccessPage.tsx @@ -42,7 +42,7 @@ export const SuccessPage = (props: SuccessPageProps) => { sx={t => ({ display: 'inline', ':not(:last-of-type)': { - marginRight: t.sizes.$1, + marginInlineEnd: t.sizes.$1, }, })} /> diff --git a/packages/ui/src/elements/Switch.tsx b/packages/ui/src/elements/Switch.tsx index 155e4ebf7ee..5526dd8d4bc 100644 --- a/packages/ui/src/elements/Switch.tsx +++ b/packages/ui/src/elements/Switch.tsx @@ -79,7 +79,7 @@ export const Switch = forwardRef( elementDescriptor={descriptors.switchThumb} sx={t => ({ position: 'absolute', - left: t.sizes.$0x5, + insetInlineStart: t.sizes.$0x5, width: t.sizes.$3, height: t.sizes.$3, borderRadius: '50%', diff --git a/packages/ui/src/elements/TagInput.tsx b/packages/ui/src/elements/TagInput.tsx index 674a98496ce..2323ca387ac 100644 --- a/packages/ui/src/elements/TagInput.tsx +++ b/packages/ui/src/elements/TagInput.tsx @@ -163,7 +163,7 @@ export const TagInput = (props: TagInputProps) => { width: 'initial', padding: 0, lineHeight: t.space.$5, - paddingLeft: t.space.$1, + paddingInlineStart: t.space.$1, '::placeholder': { color: t.colors.$colorMutedForeground, }, @@ -198,7 +198,7 @@ const TagPill = (props: TagPillProps) => { borderStyle: t.borderStyles.$solid, borderColor: t.colors.$borderAlpha100, display: 'inline-flex', - marginRight: '1px', + marginInlineEnd: '1px', cursor: 'pointer', ':hover': { backgroundColor: t.colors.$neutralAlpha100, diff --git a/packages/ui/src/elements/UserPreview.tsx b/packages/ui/src/elements/UserPreview.tsx index 95166b7f4a2..f84d004a33f 100644 --- a/packages/ui/src/elements/UserPreview.tsx +++ b/packages/ui/src/elements/UserPreview.tsx @@ -132,7 +132,7 @@ export const UserPreview = (props: UserPreviewProps) => { {icon && ( {icon} @@ -148,7 +148,7 @@ export const UserPreview = (props: UserPreviewProps) => { direction='col' justify='center' as='span' - sx={{ minWidth: '0px', textAlign: 'left' }} + sx={{ minWidth: '0px', textAlign: 'start' }} > ({ base: { - marginRight: theme.space.$2x5, + marginInlineEnd: theme.space.$2x5, width: theme.sizes.$4, height: theme.sizes.$4, }, diff --git a/packages/ui/src/primitives/Badge.tsx b/packages/ui/src/primitives/Badge.tsx index 82216c5c04e..8bcfaff319b 100644 --- a/packages/ui/src/primitives/Badge.tsx +++ b/packages/ui/src/primitives/Badge.tsx @@ -16,7 +16,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({ borderRadius: theme.radii.$sm, padding: `${theme.space.$0x25} ${theme.space.$1x5}`, display: 'inline-flex', - marginRight: '1px', + marginInlineEnd: '1px', }, variants: { textVariant: { ...common.textVariants(theme) }, diff --git a/packages/ui/src/primitives/Button.tsx b/packages/ui/src/primitives/Button.tsx index 97e7e8a8923..f42cfc588da 100644 --- a/packages/ui/src/primitives/Button.tsx +++ b/packages/ui/src/primitives/Button.tsx @@ -180,7 +180,7 @@ const ButtonChildrenWithArrow = ({ children }: PropsWithChildren) => { elementDescriptor={descriptors.buttonArrowIcon} icon={ArrowRightButtonIcon} sx={t => ({ - marginLeft: t.space.$2, + marginInlineStart: t.space.$2, width: t.sizes.$2x5, height: t.sizes.$2x5, opacity: t.opacity.$inactive, diff --git a/packages/ui/src/primitives/FormErrorText.tsx b/packages/ui/src/primitives/FormErrorText.tsx index d00b7acdfdc..20f6502e82f 100644 --- a/packages/ui/src/primitives/FormErrorText.tsx +++ b/packages/ui/src/primitives/FormErrorText.tsx @@ -15,7 +15,7 @@ const { applyVariants } = createVariants(theme => ({ gap: theme.sizes.$1, position: 'absolute', top: '0', - textAlign: 'left', + textAlign: 'start', }, variants: {}, })); diff --git a/packages/ui/src/primitives/FormSuccessText.tsx b/packages/ui/src/primitives/FormSuccessText.tsx index cb85a621e25..8cb20b9494e 100644 --- a/packages/ui/src/primitives/FormSuccessText.tsx +++ b/packages/ui/src/primitives/FormSuccessText.tsx @@ -14,7 +14,7 @@ export const { applyVariants } = createVariants(theme => ({ gap: theme.sizes.$1, position: 'absolute', top: '0', - textAlign: 'left', + textAlign: 'start', }, variants: {}, })); diff --git a/packages/ui/src/primitives/Table.tsx b/packages/ui/src/primitives/Table.tsx index 9ef257912dd..e186f327c77 100644 --- a/packages/ui/src/primitives/Table.tsx +++ b/packages/ui/src/primitives/Table.tsx @@ -20,15 +20,15 @@ const { applyVariants, filterProps } = createVariants(theme => { borderBottomWidth: '0px', borderTopWidth: '1px', borderStyle: 'solid', - borderLeftWidth: '0px', - borderRightWidth: '0px', + borderInlineStartWidth: '0px', + borderInlineEndWidth: '0px', borderColor: theme.colors.$borderAlpha150, }, 'td:not(:first-of-type)': { - paddingLeft: theme.space.$2, + paddingInlineStart: theme.space.$2, }, 'th:not(:first-of-type)': { - paddingLeft: theme.space.$2, + paddingInlineStart: theme.space.$2, }, 'tr > td': { borderTopWidth: theme.borderWidths.$normal, @@ -36,25 +36,25 @@ const { applyVariants, filterProps } = createVariants(theme => { borderTopColor: theme.colors.$borderAlpha150, paddingBottom: theme.space.$2, paddingTop: theme.space.$2, - paddingLeft: theme.space.$4, - paddingRight: theme.space.$4, + paddingInlineStart: theme.space.$4, + paddingInlineEnd: theme.space.$4, }, 'tbody > :not([hidden])~:not([hidden])': { borderBottomWidth: '0px', borderTopWidth: '1px', borderStyle: 'solid', - borderLeftWidth: '0px', - borderRightWidth: '0px', + borderInlineStartWidth: '0px', + borderInlineEndWidth: '0px', borderColor: theme.colors.$borderAlpha150, }, 'tr:hover td:first-of-type': { - borderBottomLeftRadius: theme.radii.$lg, + borderEndStartRadius: theme.radii.$lg, }, 'tr:hover td:last-of-type': { - borderBottomRightRadius: theme.radii.$lg, + borderEndEndRadius: theme.radii.$lg, }, 'tr > th:first-of-type': { - paddingLeft: theme.space.$5, + paddingInlineStart: theme.space.$5, }, 'thead::after': { content: '""', diff --git a/packages/ui/src/primitives/Th.tsx b/packages/ui/src/primitives/Th.tsx index f018c67c24c..a1d954f9e2a 100644 --- a/packages/ui/src/primitives/Th.tsx +++ b/packages/ui/src/primitives/Th.tsx @@ -8,7 +8,7 @@ import { Box } from './Box'; const { applyVariants, filterProps } = createVariants(theme => ({ base: { - textAlign: 'left', + textAlign: 'start', fontSize: theme.fontSizes.$sm, fontWeight: theme.fontWeights.$normal, color: colors.setAlpha(theme.colors.$colorForeground, 0.62), From e94d41e150b6c414cbb8b0896cd2de3fec47ab93 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 30 Jan 2026 12:57:20 -0500 Subject: [PATCH 2/8] wip --- packages/ui/src/elements/Avatar.tsx | 4 ++++ packages/ui/src/elements/Switch.tsx | 2 +- packages/ui/src/primitives/gapPropertyCompat.ts | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/elements/Avatar.tsx b/packages/ui/src/elements/Avatar.tsx index 958df6b1eb2..d0375a64512 100644 --- a/packages/ui/src/elements/Avatar.tsx +++ b/packages/ui/src/elements/Avatar.tsx @@ -159,6 +159,8 @@ export const Avatar = (props: AvatarProps) => { overflow: 'hidden', background: t.colors.$colorShimmer, position: 'absolute', + top: 0, + left: 0, width: '25%', height: '100%', transition: `all ${t.transitionDuration.$slow} ${t.transitionTiming.$easeOut}`, @@ -168,6 +170,8 @@ export const Avatar = (props: AvatarProps) => { boxSizing: 'border-box', content: "''", position: 'absolute', + top: 0, + left: 0, width: '400%', height: '100%', transform: 'var(--cl-shimmer-hover-after-transform, skewX(45deg) translateX(75%))', diff --git a/packages/ui/src/elements/Switch.tsx b/packages/ui/src/elements/Switch.tsx index 5526dd8d4bc..155e4ebf7ee 100644 --- a/packages/ui/src/elements/Switch.tsx +++ b/packages/ui/src/elements/Switch.tsx @@ -79,7 +79,7 @@ export const Switch = forwardRef( elementDescriptor={descriptors.switchThumb} sx={t => ({ position: 'absolute', - insetInlineStart: t.sizes.$0x5, + left: t.sizes.$0x5, width: t.sizes.$3, height: t.sizes.$3, borderRadius: '50%', diff --git a/packages/ui/src/primitives/gapPropertyCompat.ts b/packages/ui/src/primitives/gapPropertyCompat.ts index 580555e8890..b50e0ca8216 100644 --- a/packages/ui/src/primitives/gapPropertyCompat.ts +++ b/packages/ui/src/primitives/gapPropertyCompat.ts @@ -4,7 +4,7 @@ export const createFlexGapPropertyIosCompat = (val: string, dir: 'col' | 'row') if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13_).+safari/i)) { return { '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': { - marginLeft: dir === 'row' ? val : undefined, + marginInlineStart: dir === 'row' ? val : undefined, marginTop: dir === 'col' ? val : undefined, }, }; From bb4fb4d4b1606433c0c9ad56cb3d4ffe87b78ce4 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 30 Jan 2026 13:05:50 -0500 Subject: [PATCH 3/8] arrow animations --- packages/ui/src/elements/ArrowBlockButton.tsx | 13 +++++++++++-- packages/ui/src/elements/Header.tsx | 7 ++++++- packages/ui/src/primitives/Button.tsx | 3 +++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/elements/ArrowBlockButton.tsx b/packages/ui/src/elements/ArrowBlockButton.tsx index 92a9a475dbd..7ebc83e5407 100644 --- a/packages/ui/src/elements/ArrowBlockButton.tsx +++ b/packages/ui/src/elements/ArrowBlockButton.tsx @@ -66,10 +66,16 @@ export const ArrowBlockButton = React.forwardRef): JSX.Element > ({ color: t.colors.$colorForeground })} + sx={t => ({ + color: t.colors.$colorForeground, + '[dir="rtl"] &': { + transform: 'scaleX(-1)', + }, + })} /> {children} diff --git a/packages/ui/src/primitives/Button.tsx b/packages/ui/src/primitives/Button.tsx index f42cfc588da..28d1eb2ad68 100644 --- a/packages/ui/src/primitives/Button.tsx +++ b/packages/ui/src/primitives/Button.tsx @@ -184,6 +184,9 @@ const ButtonChildrenWithArrow = ({ children }: PropsWithChildren) => { width: t.sizes.$2x5, height: t.sizes.$2x5, opacity: t.opacity.$inactive, + '[dir="rtl"] &': { + transform: 'scaleX(-1)', + }, })} /> From 1f801646eb2850f26da18a4498e347a35584ede8 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 30 Jan 2026 13:14:44 -0500 Subject: [PATCH 4/8] add changeset --- .changeset/cuddly-ends-wait.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .changeset/cuddly-ends-wait.md diff --git a/.changeset/cuddly-ends-wait.md b/.changeset/cuddly-ends-wait.md new file mode 100644 index 00000000000..61a21cc03cd --- /dev/null +++ b/.changeset/cuddly-ends-wait.md @@ -0,0 +1,15 @@ +--- +'@clerk/ui': minor +--- + +Improve RTL support by converting physical CSS properties (margins, padding, text alignment, borders) to logical equivalents and adding direction-aware arrow icons + +The changes included: + +- Positioning (left → insetInlineStart) +- Margins (marginLeft/Right → marginInlineStart/End) +- Padding (paddingLeft/Right → paddingInlineStart/End) +- Text alignment (left/right → start/end) +- Border radius (borderTopLeftRadius → borderStartStartRadius) +- Arrow icon flipping with scaleX(-1) in RTL +- Animation direction adjustments From 5e65109e95709ef27daa851ac92731fae8939d62 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 30 Jan 2026 13:21:58 -0500 Subject: [PATCH 5/8] wip --- packages/ui/src/elements/Card/CardContent.tsx | 2 +- packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/elements/Card/CardContent.tsx b/packages/ui/src/elements/Card/CardContent.tsx index e49a6711f20..5e3061d2b72 100644 --- a/packages/ui/src/elements/Card/CardContent.tsx +++ b/packages/ui/src/elements/Card/CardContent.tsx @@ -71,7 +71,7 @@ export const CardContent = React.forwardRef((p zIndex: t.zIndices.$modal, position: 'absolute', top: t.space.$2, - right: t.space.$2, + insetInlineEnd: t.space.$2, padding: t.space.$3, })} /> diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx index 2ff26582860..d700b46446f 100644 --- a/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx +++ b/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx @@ -39,12 +39,12 @@ export const ProfileCardRoot = React.forwardRef Date: Fri, 30 Jan 2026 13:24:32 -0500 Subject: [PATCH 6/8] wip --- packages/ui/src/components/APIKeys/APIKeyModal.tsx | 2 +- packages/ui/src/components/OAuthConsent/OAuthConsent.tsx | 2 +- .../OrganizationProfile/OrganizationGeneralPage.tsx | 6 +++--- .../OrganizationMembersTabInvitations.tsx | 8 ++++---- .../OrganizationMembersTabRequests.tsx | 8 ++++---- .../OrganizationSwitcher/OrganizationSwitcherPopover.tsx | 2 +- .../OrganizationSwitcher/OrganizationSwitcherTrigger.tsx | 2 +- .../UserButton/UserButtonTopLevelIdentifier.tsx | 2 +- .../components/UserProfile/ConnectedAccountsSection.tsx | 2 +- packages/ui/src/components/UserProfile/DeleteSection.tsx | 2 +- .../ui/src/components/UserProfile/PasswordSection.tsx | 2 +- .../ui/src/components/UserProfile/UsernameSection.tsx | 2 +- .../ui/src/components/devPrompts/KeylessPrompt/index.tsx | 4 ++-- packages/ui/src/elements/Badge.tsx | 2 +- packages/ui/src/elements/ClipboardInput.tsx | 4 ++-- .../ui/src/elements/ProfileCard/ProfileCardContent.tsx | 4 ++-- 16 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/ui/src/components/APIKeys/APIKeyModal.tsx b/packages/ui/src/components/APIKeys/APIKeyModal.tsx index d1cdd43429c..1ffd6e85bfe 100644 --- a/packages/ui/src/components/APIKeys/APIKeyModal.tsx +++ b/packages/ui/src/components/APIKeys/APIKeyModal.tsx @@ -18,7 +18,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject ({ position: 'absolute', - right: 0, + insetInlineEnd: 0, bottom: 0, backgroundColor: 'inherit', backdropFilter: `blur(${t.sizes.$2})`, diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx index e1e4a6bb18e..efcd76b684a 100644 --- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx +++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx @@ -81,7 +81,7 @@ export function OAuthConsentInternal() { sx={t => ({ position: 'absolute', bottom: `calc(${t.space.$3} * -1)`, - right: `calc(${t.space.$3} * -1)`, + insetInlineEnd: `calc(${t.space.$3} * -1)`, })} /> diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx index d8a766f3223..a062f131014 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx @@ -162,7 +162,7 @@ const OrganizationDomainsSection = () => { ({ - paddingLeft: t.space.$9, + paddingInlineStart: t.space.$9, })} colorScheme='secondary' /> @@ -198,7 +198,7 @@ const OrganizationLeaveSection = () => { sx={t => ({ paddingTop: 0, paddingBottom: 0, - paddingLeft: t.space.$1, + paddingInlineStart: t.space.$1, })} id='organizationDanger' > @@ -252,7 +252,7 @@ const OrganizationDeleteSection = () => { sx={t => ({ paddingTop: 0, paddingBottom: 0, - paddingLeft: t.space.$1, + paddingInlineStart: t.space.$1, })} id={'organizationDanger'} > diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx index 8b212b98018..5857aa1943d 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx @@ -30,8 +30,8 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => { width: '100%', gap: t.space.$8, paddingBottom: t.space.$4, - paddingLeft: t.space.$1, - paddingRight: t.space.$1, + paddingInlineStart: t.space.$1, + paddingInlineEnd: t.space.$1, borderBottomWidth: t.borderWidths.$normal, borderBottomStyle: t.borderStyles.$solid, borderBottomColor: t.colors.$borderAlpha100, @@ -68,10 +68,10 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => { 'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle', )} sx={t => ({ - paddingLeft: t.space.$10, + paddingInlineStart: t.space.$10, color: t.colors.$colorMutedForeground, [mqu.md]: { - paddingLeft: 0, + paddingInlineStart: 0, }, })} /> diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx index ef9231129ac..ca0c9e5302b 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx @@ -29,8 +29,8 @@ export const OrganizationMembersTabRequests = () => { width: '100%', gap: t.space.$8, paddingBottom: t.space.$4, - paddingLeft: t.space.$1, - paddingRight: t.space.$1, + paddingInlineStart: t.space.$1, + paddingInlineEnd: t.space.$1, borderBottomWidth: t.borderWidths.$normal, borderBottomStyle: t.borderStyles.$solid, borderBottomColor: t.colors.$borderAlpha100, @@ -67,10 +67,10 @@ export const OrganizationMembersTabRequests = () => { 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle', )} sx={t => ({ - paddingLeft: t.space.$10, + paddingInlineStart: t.space.$10, color: t.colors.$colorMutedForeground, [mqu.md]: { - paddingLeft: 0, + paddingInlineStart: 0, }, })} /> diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index 40f39578b47..52c43d01821 100644 --- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -115,7 +115,7 @@ export const OrganizationSwitcherPopover = React.forwardRef ({ width: '100%', - paddingRight: t.space.$5, + paddingInlineEnd: t.space.$5, })} > { containerSx={t => ({ position: 'absolute', top: `calc(${t.space.$2} * -1)`, - right: `calc(${t.space.$2} * -1)`, + insetInlineEnd: `calc(${t.space.$2} * -1)`, })} notificationCount={notificationCount} /> diff --git a/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx b/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx index 1800efb4a69..578f0d3983f 100644 --- a/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx +++ b/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx @@ -20,7 +20,7 @@ export const UserButtonTopLevelIdentifier = ({ showName }: UserButtonTopLevelIde elementDescriptor={descriptors.userButtonOuterIdentifier} sx={[ t => ({ - paddingLeft: t.space.$2, + paddingInlineStart: t.space.$2, }), ]} > diff --git a/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx index ff00fdb0f25..ad294468763 100644 --- a/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx +++ b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx @@ -198,7 +198,7 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) => ({ - paddingRight: t.sizes.$1x5, + paddingInlineEnd: t.sizes.$1x5, display: 'inline-block', })} localizationKey={connectedAccountErrorMessage} diff --git a/packages/ui/src/components/UserProfile/DeleteSection.tsx b/packages/ui/src/components/UserProfile/DeleteSection.tsx index ea08292f1c0..55392de00e4 100644 --- a/packages/ui/src/components/UserProfile/DeleteSection.tsx +++ b/packages/ui/src/components/UserProfile/DeleteSection.tsx @@ -27,7 +27,7 @@ export const DeleteSection = () => { ({ paddingLeft: t.space.$1 })} + sx={t => ({ paddingInlineStart: t.space.$1 })} > { ({ - paddingLeft: !passwordEnabled ? '0' : undefined, + paddingInlineStart: !passwordEnabled ? '0' : undefined, paddingTop: t.space.$0x25, paddingBottom: t.space.$0x25, })} diff --git a/packages/ui/src/components/UserProfile/UsernameSection.tsx b/packages/ui/src/components/UserProfile/UsernameSection.tsx index 2e74ce56c66..aa2c0d98979 100644 --- a/packages/ui/src/components/UserProfile/UsernameSection.tsx +++ b/packages/ui/src/components/UserProfile/UsernameSection.tsx @@ -36,7 +36,7 @@ export const UsernameSection = () => { {user.username && ( diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx index 9844b8ef814..afe2147ffd6 100644 --- a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx +++ b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx @@ -118,10 +118,10 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => { sx={t => ({ position: 'fixed', bottom: '1.25rem', - right: '1.25rem', + insetInlineEnd: '1.25rem', height: `${t.sizes.$10}`, minWidth: '13.4rem', - paddingLeft: `${t.space.$3}`, + paddingInlineStart: `${t.space.$3}`, borderRadius: '1.25rem', transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)', diff --git a/packages/ui/src/elements/Badge.tsx b/packages/ui/src/elements/Badge.tsx index cf91b1ecdbf..5ee575ca207 100644 --- a/packages/ui/src/elements/Badge.tsx +++ b/packages/ui/src/elements/Badge.tsx @@ -25,7 +25,7 @@ export const LastAuthenticationStrategyBadge = ({ boxShadow: `0 0 0 1px ${t.colors.$colorBackground}`, ...(overlay && { position: 'absolute', - right: -1, + insetInlineEnd: -1, top: -1, transform: `translate(${t.space.$2x5}, calc(-50% - ${t.space.$0x5}))`, pointerEvents: 'none', diff --git a/packages/ui/src/elements/ClipboardInput.tsx b/packages/ui/src/elements/ClipboardInput.tsx index 7d8a448b723..b6c042e58d0 100644 --- a/packages/ui/src/elements/ClipboardInput.tsx +++ b/packages/ui/src/elements/ClipboardInput.tsx @@ -24,7 +24,7 @@ export const ClipboardInput = (props: ClipboardInputProps) => { {...rest} value={value} isDisabled - sx={theme => ({ paddingRight: theme.space.$8 })} + sx={theme => ({ paddingInlineEnd: theme.space.$8 })} />