hardcoded a width value for range element slider and separated settings in settings preference view into multiple categories

front/components/GtkUI/ElementTypes.tsx

@@ -117,6 +117,7 @@ export const getElementRangeNode = (
             isDisabled={disabled}
             onChangeEnd={onChange}
             accessibilityLabel={`Slider for ${title}`}
+            width="200"
         >
             <Slider.Track>
                 <Slider.FilledTrack />

front/views/settings/PreferencesView.tsx

@@ -184,6 +184,15 @@ const PreferencesView = ({ navigation }) => {
 							],
 						},
 					},
+				]}
+			/>
+			<ElementList
+				style={{
+					marginTop: 20,
+					width: "90%",
+					maxWidth: 850,
+				}}
+				elements={[
 					{
 						type: "toggle",
 						title: "Color blind mode",
@@ -194,6 +203,15 @@ const PreferencesView = ({ navigation }) => {
 							},
 						},
 					},
+				]}
+			/>
+			<ElementList
+				style={{
+					marginTop: 20,
+					width: "90%",
+					maxWidth: 850,
+				}}
+				elements={[
 					{
 						type: "range",
 						title: "Mic volume",