fixed phone version themes styles in settings

Author: Andcool-Systems

src/app/me/settings/page.tsx

@@ -12,7 +12,6 @@ import Image from 'next/image';
 import { Me } from '@/app/modules/components/MeSidebar';
 import { Fira_Code } from "next/font/google";
 import { formatDateHuman } from '@/app/modules/components/Card';
-import { getTheme } from '@/app/modules/providers';
 import IconSvg from '@/app/resources/icon.svg';
 import {
     IconUser,
@@ -286,7 +285,7 @@ const Theme = ({ data, theme, onChange }: { data: ThemeProps, theme: string, onC
     }
 
     return (
-        <div onClick={() => onChange(data.name)} style={{ cursor: 'pointer' }}>
+        <div onClick={() => onChange(data.name)} style={{ cursor: 'pointer' }} className={Style_themes.clickable}>
             <div style={{ backgroundColor: data['--main-bg-color'] }} className={Style_themes.background}>
                 <div style={{ backgroundColor: data['--main-card-color'] }} className={Style_themes.card}>
                     <div style={{ backgroundColor: data['--main-element-color'] }} className={Style_themes.icon} />

src/app/styles/me/themes.module.css

@@ -72,12 +72,19 @@
 .parent {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     gap: 1rem;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 840px) {
     .parent {
+        flex-direction: column;
         justify-content: center;
+        gap: calc(1rem - 10px);
+    }
+
+    .clickable,
+    .footer,
+    .background {
+        width: 100%;
     }
 }