fix: missing buttons RTL support

kastov · kastov · commit 044bf2f1177f · 2025-10-31T22:57:00.000+03:00
diff --git a/src/features/dashboard/config-profiles/config-editor-actions/config-editor-actions.feature.tsx b/src/features/dashboard/config-profiles/config-editor-actions/config-editor-actions.feature.tsx
@@ -28,6 +28,7 @@ import { useDownloadTemplate } from '@shared/ui/load-templates/use-download-temp
 import { QueryKeys, useUpdateConfigProfile } from '@shared/api/hooks'
 import { queryClient } from '@shared/api'
 
+import classes from './config-editor-actions.module.css'
 import { Props } from './interfaces'
 
 const MODAL_KEY = MODALS.CONFIG_PROFILE_SHOW_SNIPPETS_DRAWER
@@ -233,11 +234,8 @@ export function ConfigEditorActionsFeature(props: Props) {
                 >
                     <Menu.Target>
                         <ActionIcon
+                            className={classes.actionIconLeft}
                             size={36}
-                            style={{
-                                borderTopRightRadius: 0,
-                                borderBottomRightRadius: 0
-                            }}
                             variant={opened ? 'outline' : 'default'}
                         >
                             <TbMenuDeep size={20} />
@@ -310,23 +308,16 @@ export function ConfigEditorActionsFeature(props: Props) {
                 </Menu>
 
                 <Button
+                    className={classes.centeredButton}
                     leftSection={<PiCheckSquareOffset size={16} />}
                     onClick={formatDocument}
-                    style={{
-                        borderTopLeftRadius: 0,
-                        borderBottomLeftRadius: 0,
-                        borderTopRightRadius: 0,
-                        borderBottomRightRadius: 0,
-                        borderRight: 0,
-                        borderLeft: 0,
-                        width: '100%'
-                    }}
                     variant="default"
                 >
                     {t('config-editor-actions.feature.format')}
                 </Button>
 
                 <ActionIcon
+                    className={classes.actionIconRight}
                     onClick={() => {
                         if (isOpen) {
                             close()
@@ -335,10 +326,6 @@ export function ConfigEditorActionsFeature(props: Props) {
                         }
                     }}
                     size={36}
-                    style={{
-                        borderTopLeftRadius: 0,
-                        borderBottomLeftRadius: 0
-                    }}
                     variant={isOpen ? 'filled' : 'default'}
                 >
                     <TbBraces size={20} />
diff --git a/src/features/dashboard/config-profiles/config-editor-actions/config-editor-actions.module.css b/src/features/dashboard/config-profiles/config-editor-actions/config-editor-actions.module.css
@@ -0,0 +1,33 @@
+.actionIconLeft {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    @mixin rtl {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: var(--mantine-radius-default);
+        border-bottom-right-radius: var(--mantine-radius-default);
+    }
+}
+
+.centeredButton {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0;
+    border-left: 0;
+    width: 100%;
+}
+
+.actionIconRight {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    @mixin rtl {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--mantine-radius-default);
+        border-bottom-left-radius: var(--mantine-radius-default);
+    }
+}
diff --git a/src/features/dashboard/subscription-templates/template-editor-actions/template-editor-actions.feature.tsx b/src/features/dashboard/subscription-templates/template-editor-actions/template-editor-actions.feature.tsx
@@ -19,6 +19,8 @@ import { useDownloadTemplate } from '@shared/ui/load-templates/use-download-temp
 import { QueryKeys, useUpdateSubscriptionTemplate } from '@shared/api/hooks'
 import { queryClient } from '@shared/api'
 
+import classes from './template-editor-actions.module.css'
+
 interface Props {
     editorRef: RefObject<editor.IStandaloneCodeEditor | null>
     editorType: 'json' | 'yaml'
@@ -160,11 +162,8 @@ export function TemplateEditorActionsFeature(props: Props) {
                 >
                     <Menu.Target>
                         <ActionIcon
+                            className={classes.actionIconLeft}
                             size={36}
-                            style={{
-                                borderTopRightRadius: 0,
-                                borderBottomRightRadius: 0
-                            }}
                             variant={opened ? 'outline' : 'default'}
                         >
                             <TbMenuDeep size={20} />
@@ -210,14 +209,9 @@ export function TemplateEditorActionsFeature(props: Props) {
                 </Menu>
 
                 <Button
+                    className={classes.centeredButton}
                     leftSection={<PiCheckSquareOffset size={16} />}
                     onClick={formatDocument}
-                    style={{
-                        borderTopLeftRadius: 0,
-                        borderBottomLeftRadius: 0,
-                        borderLeft: 0,
-                        width: '100%'
-                    }}
                     variant="default"
                 >
                     {t('config-editor-actions.feature.format')}
diff --git a/src/features/dashboard/subscription-templates/template-editor-actions/template-editor-actions.module.css b/src/features/dashboard/subscription-templates/template-editor-actions/template-editor-actions.module.css
@@ -0,0 +1,25 @@
+.actionIconLeft {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    @mixin rtl {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: var(--mantine-radius-default);
+        border-bottom-right-radius: var(--mantine-radius-default);
+    }
+}
+
+.centeredButton {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    width: 100%;
+
+    @mixin rtl {
+        border-top-left-radius: var(--mantine-radius-default);
+        border-bottom-left-radius: var(--mantine-radius-default);
+
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
diff --git a/src/widgets/dashboard/config-profiles/config-profile-card/config-profile-card.module.css b/src/widgets/dashboard/config-profiles/config-profile-card/config-profile-card.module.css
@@ -141,7 +141,7 @@
 }
 
 .uuidText {
-    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
+    font-family: 'Fira Mono', monospace;
     font-size: 10px;
     letter-spacing: -0.2px;
 }
@@ -169,6 +169,13 @@
     border-bottom-right-radius: 0;
     font-weight: 600;
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: var(--mantine-radius-default);
+        border-bottom-right-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControl {
@@ -177,6 +184,16 @@
     border: 0;
     border-left: 2px solid var(--mantine-color-body);
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-left: 0;
+        border-right: 2px solid var(--mantine-color-body);
+
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--mantine-radius-default);
+        border-bottom-left-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControlIcon {
diff --git a/src/widgets/dashboard/config-profiles/config-profile-card/config-profile-card.widget.tsx b/src/widgets/dashboard/config-profiles/config-profile-card/config-profile-card.widget.tsx
@@ -197,7 +197,7 @@ export function ConfigProfileCardWidget(props: IProps) {
                                 >
                                     {configProfile.name}
                                 </Text>
-                                <Group gap="xs" justify="left" wrap="nowrap">
+                                <Group gap="xs" wrap="nowrap">
                                     <Tooltip label={t('config-profiles-grid.widget.inbounds')}>
                                         <Badge
                                             color="blue"
diff --git a/src/widgets/dashboard/external-squads/external-squad-card/external-squad-card.module.css b/src/widgets/dashboard/external-squads/external-squad-card/external-squad-card.module.css
@@ -141,7 +141,7 @@
 }
 
 .uuidText {
-    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
+    font-family: 'Fira Mono', monospace;
     font-size: 10px;
     letter-spacing: -0.2px;
 }
@@ -169,6 +169,13 @@
     border-bottom-right-radius: 0;
     font-weight: 600;
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: var(--mantine-radius-default);
+        border-bottom-right-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControl {
@@ -177,6 +184,16 @@
     border: 0;
     border-left: 2px solid var(--mantine-color-body);
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-left: 0;
+        border-right: 2px solid var(--mantine-color-body);
+
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--mantine-radius-default);
+        border-bottom-left-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControlIcon {
diff --git a/src/widgets/dashboard/external-squads/external-squad-card/external-squad-card.widget.tsx b/src/widgets/dashboard/external-squads/external-squad-card/external-squad-card.widget.tsx
@@ -120,7 +120,7 @@ export function ExternalSquadCardWidget(props: IProps) {
                                 >
                                     {externalSquad.name}
                                 </Text>
-                                <Group gap="xs" justify="left" wrap="nowrap">
+                                <Group gap="xs" wrap="nowrap">
                                     <Tooltip label={t('external-squad-card.widget.users')}>
                                         <Badge
                                             color={isActive ? 'teal' : 'gray'}
diff --git a/src/widgets/dashboard/external-squads/external-squads-drawer/external-squads.drawer.widget.tsx b/src/widgets/dashboard/external-squads/external-squads-drawer/external-squads.drawer.widget.tsx
@@ -102,7 +102,7 @@ export const ExternalSquadsDrawer = memo(() => {
                                     >
                                         {externalSquad.name}
                                     </Text>
-                                    <Group gap="xs" justify="left" wrap="nowrap">
+                                    <Group gap="xs" wrap="nowrap">
                                         <Tooltip label={t('external-squad-card.widget.users')}>
                                             <Badge
                                                 color={isActive ? 'teal' : 'gray'}
diff --git a/src/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.module.css b/src/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.module.css
@@ -141,7 +141,7 @@
 }
 
 .uuidText {
-    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
+    font-family: 'Fira Code', monospace;
     font-size: 10px;
     letter-spacing: -0.2px;
 }
@@ -169,6 +169,13 @@
     border-bottom-right-radius: 0;
     font-weight: 600;
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: var(--mantine-radius-default);
+        border-bottom-right-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControl {
@@ -177,6 +184,16 @@
     border: 0;
     border-left: 2px solid var(--mantine-color-body);
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-left: 0;
+        border-right: 2px solid var(--mantine-color-body);
+
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--mantine-radius-default);
+        border-bottom-left-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControlIcon {
diff --git a/src/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.widget.tsx b/src/widgets/dashboard/internal-squads/internal-squad-card/internal-squad-card.widget.tsx
@@ -112,7 +112,7 @@ export function InternalSquadCardWidget(props: IProps) {
                                 >
                                     {internalSquad.name}
                                 </Text>
-                                <Group gap="xs" justify="left" wrap="nowrap">
+                                <Group gap="xs" wrap="nowrap">
                                     <Tooltip label={t('internal-squads-grid.widget.inbounds')}>
                                         <Badge
                                             color="blue"
diff --git a/src/widgets/dashboard/templates/template-card/templates-card.module.css b/src/widgets/dashboard/templates/template-card/templates-card.module.css
@@ -101,7 +101,7 @@
 }
 
 .uuidText {
-    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
+    font-family: 'Fira Mono', monospace;
     font-size: 10px;
     letter-spacing: -0.2px;
 }
@@ -124,6 +124,13 @@
     border-bottom-right-radius: 0;
     font-weight: 600;
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: var(--mantine-radius-default);
+        border-bottom-right-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControl {
@@ -132,6 +139,16 @@
     border: 0;
     border-left: 1px solid var(--mantine-color-dark-4);
     transition: all 0.2s ease;
+
+    @mixin rtl {
+        border-left: 0;
+        border-right: 1px solid var(--mantine-color-dark-4);
+
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: var(--mantine-radius-default);
+        border-bottom-left-radius: var(--mantine-radius-default);
+    }
 }
 
 .menuControlIcon {
diff --git a/src/widgets/dashboard/users/internal-squads-drawer-with-store/internal-squads-with-store.drawer.widget.tsx b/src/widgets/dashboard/users/internal-squads-drawer-with-store/internal-squads-with-store.drawer.widget.tsx
@@ -248,7 +248,7 @@ export const InternalSquadsDrawerWithStore = () => {
                                 >
                                     {internalSquad.name}
                                 </Text>
-                                <Group gap="xs" justify="left" wrap="nowrap">
+                                <Group gap="xs" wrap="nowrap">
                                     <Tooltip
                                         label={t('internal-squads-with-store.drawer.widget.users')}
                                     >

Original file line number	Diff line number	Diff line change
`@@ -197,7 +197,7 @@ export function ConfigProfileCardWidget(props: IProps) {`
`197`	`197`	`>`
`198`	`198`	`{configProfile.name}`
`199`	`199`	`</Text>`
`200`		`- <Group gap="xs" justify="left" wrap="nowrap">`
	`200`	`+ <Group gap="xs" wrap="nowrap">`
`201`	`201`	`<Tooltip label={t('config-profiles-grid.widget.inbounds')}>`
`202`	`202`	`<Badge`
`203`	`203`	`color="blue"`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@ export function ExternalSquadCardWidget(props: IProps) {`
`120`	`120`	`>`
`121`	`121`	`{externalSquad.name}`
`122`	`122`	`</Text>`
`123`		`- <Group gap="xs" justify="left" wrap="nowrap">`
	`123`	`+ <Group gap="xs" wrap="nowrap">`
`124`	`124`	`<Tooltip label={t('external-squad-card.widget.users')}>`
`125`	`125`	`<Badge`
`126`	`126`	`color={isActive ? 'teal' : 'gray'}`
Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@ export const ExternalSquadsDrawer = memo(() => {`
`102`	`102`	`>`
`103`	`103`	`{externalSquad.name}`
`104`	`104`	`</Text>`
`105`		`- <Group gap="xs" justify="left" wrap="nowrap">`
	`105`	`+ <Group gap="xs" wrap="nowrap">`
`106`	`106`	`<Tooltip label={t('external-squad-card.widget.users')}>`
`107`	`107`	`<Badge`
`108`	`108`	`color={isActive ? 'teal' : 'gray'}`