Style changes

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -32,10 +32,14 @@ function SettingsHeader({
 			mt={0}
 			justify='center'
 			pos={'absolute'}
-			style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 1 }}
+			style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 99 }}
 		>
 			<Group w={isMobile ? undefined : '100%'}>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				<Text
+					miw={isMobile ? 100 : undefined}
+					className={textClasses.settingsSubTitle}
+					classNames={textClasses}
+				>
 					{title}
 				</Text>
 				<Popover withArrow withOverlay withinPortal={true}>
@@ -51,7 +55,7 @@ function SettingsHeader({
 						style={{
 							color: theme.primaryColor,
 							backgroundColor: theme.backgroundColor,
-							width: '500px',
+							width: isMobile ? '95%' : '500px',
 						}}
 					>
 						<Stack>
@@ -108,7 +112,7 @@ function SettingsHeader({
 					labelPosition='left'
 					pos={'absolute'}
 					right={isMobile ? '2rem' : '1rem'}
-					top={isMobile ? '10rem' : undefined}
+					top={isMobile ? '3.5rem' : undefined}
 					onChange={(e) => {
 						setDragging(e.target.checked);
 					}}