From e1b55e4019beae0936b5c948b423bb9196054461 Mon Sep 17 00:00:00 2001
From: GaetanGrd <40648115+GaetanGrd@users.noreply.github.com>
Date: Sat, 14 Jun 2025 14:01:07 +0200
Subject: [PATCH] Feature/language UI update (#797)

* split radio items into two columns for better layout

* Add SplitColumns prop to SettingRadioArray for flexible layout

* Add columnCount prop to SettingRadioArray for flexible layout

* REmove useless change

* fix dytnamic grid columns after compilation

* remove useless span

---------

Co-authored-by: Zagrios <40181755+Zagrios@users.noreply.github.com>
---
 .../settings/setting-radio-array.component.tsx        | 11 ++++++-----
 src/renderer/pages/settings-page.component.tsx        |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/settings/setting-radio-array.component.tsx b/src/renderer/components/settings/setting-radio-array.component.tsx
index 1a7f2e60..05f1d083 100644
--- a/src/renderer/components/settings/setting-radio-array.component.tsx
+++ b/src/renderer/components/settings/setting-radio-array.component.tsx
@@ -8,10 +8,11 @@ type Props<T> = {
     selectedItemId?: number;
     selectedItemValue?: T;
     direction?: CSSProperties["flexDirection"],
+    columnCount?: number;
     onItemSelected?: (item: RadioItem<T>) => void
 };
 
-export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemValue, onItemSelected, direction = "column" }: Props<T>) {
+export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemValue, onItemSelected, direction = "column",columnCount = 1, }: Props<T>) {
     const t = useTranslation();
 
     const isSelected = (item: RadioItem<T>) => {
@@ -19,17 +20,17 @@ export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemVa
     }
 
     return (
-        <div id={id} className="w-full flex gap-1.5" style={{flexDirection: direction}}>
+        <div id={id} className="w-full grid gap-1.5" style={{flexDirection: direction, gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`}}>
             {items.map(i => (
-                <div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-300 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
+                <div onClick={() => onItemSelected(i)} key={i.id} className={`h-12 py-3 w-full flex cursor-pointer justify-between rounded-md px-2 transition-colors duration-300 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
                     <div className="flex items-center">
                         <div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
                             <motion.span initial={{ scale: 0 }} animate={{ scale: isSelected(i) ? 1 : 0 }} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full" />
                         </div>
-                        <h2 className="font-extrabold">{t(i.text)}</h2>
+                        <h2 className="font-extrabold text-nowrap">{t(i.text)}</h2>
                     </div>
                     {i.icon && (
-                        <div className="flex items-center">
+                        <div className="flex items-center text-right">
                             {i.textIcon && <span className="text-sm">{t(i.textIcon)}</span>}
                             {i.icon}
                         </div>
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index 5a4a6afe..06ffd199 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -498,7 +498,7 @@ export function SettingsPage() {
                 </SettingContainer>
 
                 <SettingContainer title="pages.settings.language.title" description="pages.settings.language.description">
-                    <SettingRadioArray items={languagesItems} selectedItemValue={languageSelected} onItemSelected={handleChangeLanguage} />
+                    <SettingRadioArray items={languagesItems} selectedItemValue={languageSelected} onItemSelected={handleChangeLanguage} columnCount={2} />
                 </SettingContainer>
 
                 <SettingContainer title="pages.settings.patreon.title" description="pages.settings.patreon.description">