Style fixes

src/pages/settings/Settings.tsx

@@ -1,5 +1,14 @@
 import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
-import { FiArrowLeftCircle } from 'react-icons/fi';
+import {
+	FiArrowLeftCircle,
+	FiBook,
+	FiBookmark,
+	FiEdit,
+	FiGlobe,
+	FiMail,
+	FiSearch,
+	FiUser,
+} from 'react-icons/fi';
 import { actionIconClasses, tabClasses, textClasses } from 'styles';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
@@ -10,8 +19,9 @@ import SearchProviders from './components/SearchProviders';
 import Themes from './components/Themes';
 
 export function Settings({ theme }: any) {
+	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 	return (
-		<Stack h={'100vh'} px={'2rem'}>
+		<Stack px={'2rem'}>
 			<Group gap={0}>
 				<ActionIcon
 					className={actionIconClasses.backButton}
@@ -26,19 +36,27 @@ export function Settings({ theme }: any) {
 				</Text>
 			</Group>
 			<Tabs
-				orientation='vertical'
+				orientation={isMobile ? 'horizontal' : 'vertical'}
 				defaultValue={'personalization'}
 				className={tabClasses.settingsTabs}
 				classNames={tabClasses}
 			>
 				<Tabs.List>
-					<Tabs.Tab value='personalization'>Personal Info</Tabs.Tab>
-					<Tabs.Tab value='messages'>Messages</Tabs.Tab>
-					<Tabs.Tab value='applications'>Applications</Tabs.Tab>
-					<Tabs.Tab value='bookmarks'>Bookmarks</Tabs.Tab>
-					<Tabs.Tab value='bookmarksCategories'>Categories</Tabs.Tab>
-					<Tabs.Tab value='themes'>Themes</Tabs.Tab>
-					<Tabs.Tab value='providers'>Search Providers</Tabs.Tab>
+					<Tabs.Tab value='personalization'>
+						{isMobile ? <FiUser /> : 'Personal Info'}
+					</Tabs.Tab>
+					<Tabs.Tab value='messages'>{isMobile ? <FiMail /> : 'Messages'}</Tabs.Tab>
+					<Tabs.Tab value='applications'>
+						{isMobile ? <FiGlobe /> : 'Applications'}
+					</Tabs.Tab>
+					<Tabs.Tab value='bookmarks'>{isMobile ? <FiBookmark /> : 'Bookmarks'}</Tabs.Tab>
+					<Tabs.Tab value='bookmarksCategories'>
+						{isMobile ? <FiBook /> : 'Categories'}
+					</Tabs.Tab>
+					<Tabs.Tab value='themes'>{isMobile ? <FiEdit /> : 'Themes'}</Tabs.Tab>
+					<Tabs.Tab value='providers'>
+						{isMobile ? <FiSearch /> : 'Search Providers'}
+					</Tabs.Tab>
 				</Tabs.List>
 				<Tabs.Panel value='personalization'>
 					<Personalization />