Fix prayers page layout using flexbox instead of Grid

- 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

@@ -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