From 5cbb20e96f5f00e98d9b6c0cc2cbf8525cb9a9fb Mon Sep 17 00:00:00 2001
From: andupetcu <47487320+andupetcu@users.noreply.github.com>
Date: Sun, 21 Sep 2025 23:24:33 +0300
Subject: [PATCH] Fix prayers page layout using flexbox instead of Grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced Grid components with Box components using flexbox
- Sidebar now takes 25% width on desktop, 100% on mobile
- Prayer list takes remaining space with flex: 1
- Responsive layout switches to column on mobile
- Fixed side-by-side layout issue

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/[locale]/prayers/page.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/prayers/page.tsx b/app/[locale]/prayers/page.tsx
index 4fa9840..5f41718 100644
--- a/app/[locale]/prayers/page.tsx
+++ b/app/[locale]/prayers/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import {
   Container,
-  Grid,
   Card,
   CardContent,
   Typography,
@@ -285,9 +284,9 @@ export default function PrayersPage() {
           </Typography>
         </Box>
 
-        <Grid container spacing={4}>
+        <Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
           {/* Categories Filter */}
-          <Grid item xs={12} md={3}>
+          <Box sx={{ width: { xs: '100%', md: '25%' }, flexShrink: 0 }}>
             <Card>
               <CardContent>
                 {/* Add Prayer Button */}
@@ -353,10 +352,10 @@ export default function PrayersPage() {
                 </Typography>
               </CardContent>
             </Card>
-          </Grid>
+          </Box>
 
           {/* Prayer Requests */}
-          <Grid item xs={12} md={9}>
+          <Box sx={{ flex: 1, width: { xs: '100%', md: '75%' } }}>
             {loading ? (
               <Box>
                 {Array.from({ length: 3 }).map((_, index) => (
@@ -467,8 +466,8 @@ export default function PrayersPage() {
                 })}
               </Box>
             )}
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
 
         {/* Add Prayer Dialog */}
         <Dialog