more responsive settings ui

Cycling74 · Jun 25, 2024 · 56a2c0b · 56a2c0b
1 parent 6f37e51
commit 56a2c0b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Button, Group, Modal, Stack, Tabs } from "@mantine/core";
+import { Anchor, Button, Group, Modal, Stack, Tabs, Text } from "@mantine/core";
 import SettingsList from "./list";
 import { FunctionComponent, memo, useCallback, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/useAppDispatch";
@@ -113,7 +113,8 @@ const SettingsTabPanel: FunctionComponent<SettingsTabPanelProps> = memo(function
 								actions.map((info, i) => (
 									<Button
 										key={ i }
-										variant="default"
+										variant="outline"
+										c="blue.6"
 										onClick={ () => dispatch(info.action()) }
 										leftSection={ info.icon ? <IconElement path={ info.icon } /> : null }
 									>
@@ -136,7 +137,6 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 	const dispatch = useAppDispatch();
 
 	const showFullScreen = useIsMobileDevice();
-	const isMobile = useIsMobileDevice();
 
 	const [
 		doShowSettings,
@@ -167,7 +167,7 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 			title: "Control"
 		},
 		[SettingsTab.Instance]: {
-			title: isMobile ? "Instance" : "Patcher Instance"
+			title: "Patcher Instance"
 		},
 		[SettingsTab.Audio]: {
 			title: "Audio",
@@ -207,7 +207,11 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 								<Tabs.List grow>
 									{
 										Object.values(SettingsTab).map(id => (
-											<Tabs.Tab key={ id } value={ id } >{ tabConfigByTab[id].title }</Tabs.Tab>
+											<Tabs.Tab key={ id } value={ id } >
+												<Text fz={{ base: "sm", sm: "md" }} lh={{ base: "sm", sm: "md" }}>
+													{ tabConfigByTab[id].title }
+												</Text>
+											</Tabs.Tab>
 										))
 									}
 								</Tabs.List>

diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx
@@ -150,7 +150,7 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 	}
 
 	return (
-		<Group className={ classes.item } >
+		<div className={ classes.item } >
 			<div className={ classes.itemTitleWrap } >
 				<label htmlFor={ props.name } className={ classes.itemTitle } >{ props.title }</label>
 				{
@@ -160,7 +160,7 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 			<div className={ classes.itemInputWrap }>
 				{ el }
 			</div>
-		</Group>
+		</div>
 	);
 });
 

diff --git a/src/components/settings/settings.module.css b/src/components/settings/settings.module.css
@@ -7,27 +7,41 @@
 
 
 .item {
+
+	display: flex;
+	flex-direction: column;
+
 	padding: 0 0 var(--mantine-spacing-xs) 0;
 	border-bottom: 1px solid var(--mantine-color-default-border);
 	gap: var(--mantine-spacing-xs);
 
 	&:last-child {
 		border-bottom: none;
 	}
+
+	@media (min-width: $mantine-breakpoint-sm) {
+		flex-direction: row;
+	}
 }
 
 .itemInputWrap {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	min-width: 100px;
-	max-width: 250px;
-	height: 100%;
-	padding: var(--mantine-spacing-xs) 0;
+	display: block;
+	width: 100%;
+
 
 	> * {
 		max-width: 100%;
 	}
+
+	@media (min-width: $mantine-breakpoint-sm) {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		min-width: 100px;
+		max-width: 250px;
+		height: 100%;
+		padding: var(--mantine-spacing-xs) 0;
+	}
 }
 
 .itemTitleWrap {