From d93535e4b90632302f5f396aaaa343e20590772f Mon Sep 17 00:00:00 2001
From: QamarQ <kamilm@you2.pl>
Date: Fri, 17 Jan 2025 18:23:09 +0100
Subject: [PATCH] feat: mobile version for settings page

---
 frontend/src/app/plans/_components/settings-sidebar.tsx | 5 +----
 frontend/src/app/plans/account/layout.tsx               | 2 +-
 frontend/src/app/plans/account/page.tsx                 | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/plans/_components/settings-sidebar.tsx b/frontend/src/app/plans/_components/settings-sidebar.tsx
index 8542f8d..270f28d 100644
--- a/frontend/src/app/plans/_components/settings-sidebar.tsx
+++ b/frontend/src/app/plans/_components/settings-sidebar.tsx
@@ -23,10 +23,7 @@ export function SidebarSettings({
 
   return (
     <nav
-      className={cn(
-        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
-        className,
-      )}
+      className={cn("flex flex-col space-x-0 lg:space-y-1", className)}
       {...props}
     >
       {items.map((item) => (
diff --git a/frontend/src/app/plans/account/layout.tsx b/frontend/src/app/plans/account/layout.tsx
index 5d809c6..a1c00c7 100644
--- a/frontend/src/app/plans/account/layout.tsx
+++ b/frontend/src/app/plans/account/layout.tsx
@@ -43,7 +43,7 @@ export default async function SettingsLayout({
 
   return (
     <div className="w-full pb-10">
-      <div className="container mx-auto flex h-full min-h-screen flex-col space-y-6 p-10 pb-0">
+      <div className="container mx-auto flex h-full min-h-screen flex-col space-y-6 p-4 pb-0 md:p-10">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Ustawienia</h2>
           <p className="text-muted-foreground">
diff --git a/frontend/src/app/plans/account/page.tsx b/frontend/src/app/plans/account/page.tsx
index 42643eb..2315f51 100644
--- a/frontend/src/app/plans/account/page.tsx
+++ b/frontend/src/app/plans/account/page.tsx
@@ -37,7 +37,7 @@ export default async function ProfilePage() {
         </p>
       </div>
       <Separator />
-      <div className="flex items-start gap-4 rounded-md border p-5">
+      <div className="flex flex-col items-start gap-4 rounded-md border p-5 md:flex-row">
         <div className="size-[51px] min-w-[51px] rounded-full border">
           <Image
             src={profile.photo_urls["50x50"]}