feat(titles): responsive advanced settings

src/components/General/Titles.tsx

@@ -1,4 +1,4 @@
-import { XStack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Button, Text } from '@status-im/components'
 import { RevealIcon } from '@status-im/icons'
 
@@ -19,7 +19,7 @@ const Titles = ({
 }: TitlesProps) => {
   return (
     <YStack style={{ width: '100%', margin: '0 0 1em' }}>
-      <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <div className={'titles-container'}>
         <Text size={titleSize} weight={'semibold'}>
           {title}
         </Text>
@@ -28,7 +28,7 @@ const Titles = ({
             Advanced Settings
           </Button>
         )}
-      </XStack>
+      </div>
       <Text size={subtitleSize}>{subtitle}</Text>
     </YStack>
   )

src/index.css

@@ -123,6 +123,11 @@ ul li {
   margin-top: 4.4rem;
 }
 
+.titles-container {
+  display: flex;
+  justify-content: space-between;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #09101c;
@@ -154,3 +159,15 @@ ul li {
     margin-top: 0;
   }
 }
+
+@media (max-width: 1160px) and (min-width: 1000px) {
+  .titles-container {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 500px) {
+  .titles-container {
+    flex-direction: column;
+  }
+}

src/redux/DeviceHealthCheck/slice.ts

@@ -51,4 +51,4 @@ const deviceHealthSlice = createSlice({
 export const { setStorage, setCpuLoad, setMemory, setNetworkHealth } =
   deviceHealthSlice.actions
 
-export default deviceHealthSlice.reducer
+export default deviceHealthSlice.reducer