feat: responsive settings ui

src/tabs/SettingsTab.tsx

@@ -1,9 +1,14 @@
-import { Container, Flex } from '@chakra-ui/react';
+import { Container, Flex, useBreakpointValue } from '@chakra-ui/react';
 import { Settings } from '~/features/settings/Settings';
 
 export function SettingsTab() {
+  const containerProps = useBreakpointValue({
+    base: { p: '0' },
+    lg: { p: undefined },
+  });
+
   return (
-    <Container as={Flex} maxW="container.lg">
+    <Container as={Flex} maxW="container.lg" {...containerProps}>
       <Settings />
     </Container>
   );