From 61e25f8b9556c0d5f287574fa690b039dd903c01 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Thu, 23 May 2024 14:19:54 +0200
Subject: [PATCH] Fix settings wrapping on small screens

---
 front/packages/ui/src/settings/base.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/front/packages/ui/src/settings/base.tsx b/front/packages/ui/src/settings/base.tsx
index 0b9f7769..3254b375 100644
--- a/front/packages/ui/src/settings/base.tsx
+++ b/front/packages/ui/src/settings/base.tsx
@@ -33,7 +33,7 @@ import {
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Children, type ReactElement, type ReactNode } from "react";
 import { type Falsy, View } from "react-native";
-import { px, rem, useYoshiki } from "yoshiki/native";
+import { percent, px, rem, useYoshiki } from "yoshiki/native";
 
 export const Preference = ({
 	customIcon,
@@ -79,7 +79,18 @@ export const Preference = ({
 					<SubP>{description}</SubP>
 				</View>
 			</View>
-			<View {...css({ marginX: ts(2), flexDirection: "row", gap: ts(1) })}>{children}</View>
+			<View
+				{...css({
+					marginX: ts(2),
+					flexDirection: "row",
+					justifyContent: "flex-end",
+					gap: ts(1),
+					maxWidth: percent(50),
+					flexWrap: "wrap",
+				})}
+			>
+				{children}
+			</View>
 		</View>
 	);
 };