fix mobile layout

Author: Voxel07

src/App.jsx

@@ -1,4 +1,3 @@
-import Sidebar, { useSidebar } from './components/Navigation/Sidebar'
 import { Routes, Navigate, Route, BrowserRouter as Router } from "react-router-dom";
 
 // MUI
@@ -46,7 +45,6 @@ import Member from './Pages/StaticContent/Member';
 function App() {
   const { auth } = useAuth();
   const [user, setUser] = useState({ valid: false, name: "", role: "", jwt: "" });
-  const { mode, toggleMode, restoreSidebar } = useSidebar();
 
   useEffect(() => {
     if (auth && auth.JWT) {
@@ -72,13 +70,8 @@ function App() {
   return (
     <UserContext.Provider value={stateValue}>
       <AlertsContext.Provider value={alertsManagerRef}>
-        <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-          {/* Collapsible Sidebar */}
-          <Sidebar mode={mode} onToggleMode={toggleMode} />
-
-          {/* Main content area */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '100vh' }}>
-            <Navbar sidebarHidden={mode === 'hidden'} onRestoreSidebar={restoreSidebar} />
+        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+            <Navbar />
             <AlertsManager ref={alertsManagerRef} />
             <Box component="main" sx={{ flex: '1 0 auto' }}>
               <Routes>
@@ -120,7 +113,6 @@ function App() {
             </Box>
             <Footer />
           </Box>
-        </Box>
       </AlertsContext.Provider>
     </UserContext.Provider>
   );

src/Pages/Events/Events.jsx

@@ -8,6 +8,7 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
+import Collapse from '@mui/material/Collapse';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -143,6 +144,8 @@ export default function Forum_Post() {
 
   // Poll Dialog State
   const [createPollOpen, setCreatePollOpen] = useState(false);
+  const [pollsVisible, setPollsVisible] = useState(true);
+  const [eventVisible, setEventVisible] = useState(true);
   const [pollQuestion, setPollQuestion] = useState('');
   const [pollOptions, setPollOptions] = useState(['', '']);
   const [pollAllowMultiple, setPollAllowMultiple] = useState(false);
@@ -409,12 +412,12 @@ export default function Forum_Post() {
         </AccordionSummary>
         <Divider />
         <AccordionDetails sx={{ p: 0 }}>
-          <Post post={post} onUpdate={() => fetchData(true)} onDelete={() => navigate("/Forum/Topic/" + post.topicId)} onAddPoll={() => setCreatePollOpen(true)} />
+          <Post post={post} onUpdate={() => fetchData(true)} onDelete={() => navigate("/Forum/Topic/" + post.topicId)} onAddPoll={() => setCreatePollOpen(true)} pollsVisible={pollsVisible} onTogglePolls={() => setPollsVisible(v => !v)} />
         </AccordionDetails>
       </Accordion>
 
       {/* Render Polls if they exist in the post data */}
-      {post.polls && post.polls.length > 0 && (
+      {pollsVisible && post.polls && post.polls.length > 0 && (
         <Box sx={{ mb: 4 }}>
           <Grid container spacing={3}>
             {post.polls.map(poll => (
@@ -429,13 +432,22 @@ export default function Forum_Post() {
       {/* Associated Event Details & Attendance */}
       {associatedEvent && (
         <Card sx={{ mb: 4, border: '1px solid rgba(255, 255, 255, 0.08)', bgcolor: 'rgba(255, 255, 255, 0.02)', borderRadius: 2 }}>
-          <CardContent sx={{ p: 3 }}>
-            <Stack direction="row" spacing={1} sx={{ alignItems: 'center', mb: 2, color: 'primary.main' }}>
-              <EventNoteIcon />
-              <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                Zugehöriges Event: {associatedEvent.title}
-              </Typography>
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 2.5 }}>
+          <CardContent sx={{ py: eventVisible ? 3 : 1.5, px: 3 }}>
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+              <Stack direction="row" spacing={1} sx={{ alignItems: 'center', color: 'primary.main' }}>
+                <EventNoteIcon />
+                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                  Zugehöriges Event: {associatedEvent.title}
+                </Typography>
+              </Stack>
+              <Tooltip title={eventVisible ? 'Event ausblenden' : 'Event einblenden'}>
+                <IconButton size="small" onClick={() => setEventVisible(v => !v)}>
+                  {eventVisible ? <VisibilityIcon fontSize="small" /> : <VisibilityIcon fontSize="small" sx={{ opacity: 0.3 }} />}
+                </IconButton>
+              </Tooltip>
+            </Stack>
+            <Collapse in={eventVisible}>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 2.5, mt: 1 }}>
               Ort: <strong>{associatedEvent.location}</strong> | Datum: <strong>{(() => {
                 if (!associatedEvent.eventDate) return '';
                 try {
@@ -467,7 +479,6 @@ export default function Forum_Post() {
                 }
               })()}</strong>
             </Typography>
-            </Stack>
 
             <Grid container spacing={2} sx={{ mt: 2.5 }}>
               {/* YES / Zusagen */}
@@ -577,12 +588,22 @@ export default function Forum_Post() {
                 </Box>
               </Grid>
             </Grid>
+            </Collapse>
           </CardContent>
         </Card>
       )}
 
       {/* Answers section */}
-      <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 3, color: 'primary.main' }}>
+      <Typography
+        variant="h5"
+        sx={{
+          fontWeight: 'bold',
+          mb: { xs: 1, md: 2 },
+          mt: 0,
+          color: 'primary.main',
+          textAlign: { xs: 'center', md: 'left' },
+        }}
+      >
         Antworten ({answers.length})
       </Typography>
 

src/Pages/Forum/Forum-Post.jsx

@@ -117,12 +117,12 @@ export default function Forum_Topic() {
 
   const topicChips = [
     { tooltip: "Ersteller", icon: <PersonOutlineIcon />, label: creator || 'Unbekannt' },
-    { tooltip: "Erstellungsdatum", icon: <EventNoteIcon />, label: convertTimestamp(creationDate) },
+    { tooltip: "Erstellungsdatum", icon: <EventNoteIcon />, label: convertTimestamp(creationDate, true) },
     { tooltip: "Beiträge", icon: <ForumIcon />, label: postCount }
   ];
 
   return (
-    <Container maxWidth="xl" sx={{ px: { xs: 1, md: 3 }, py: 3 }}>
+    <Container maxWidth="xl" sx={{ px: { xs: 1, md: 3 }, py: 3, pb: 6 }}>
       <ForumBreadcrumbs
         categoryId={topicData.categoryId}
         categoryName={topicData.categoryName}
@@ -137,6 +137,7 @@ export default function Forum_Topic() {
           id="topic-header"
           sx={{
             cursor: 'default',
+            py: 0.5,
             '& .MuiAccordionSummary-content': {
               width: '100%',
               margin: 0,
@@ -150,8 +151,10 @@ export default function Forum_Topic() {
                 {topic}
               </Typography>
             </Grid>
-            <Grid size={{ xs: 12, md: 8 }}>
-              <ForumChips items={topicChips} />
+            <Grid size={{ xs: 12, md: 8 }} sx={{ display: 'flex', justifyContent: { md: 'flex-end' } }}>
+              <Box sx={{ display: { xs: 'none', md: 'block' }, '@media (min-width: 450px)': { display: 'block' } }}>
+                <ForumChips items={topicChips} />
+              </Box>
             </Grid>
           </Grid>
         </AccordionSummary>

src/Pages/Forum/Forum-Topic.jsx

@@ -196,24 +196,24 @@ export default function RegestrationSucessfull() {
 
                 <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ width: '100%', justifyContent: 'center' }}>
                   <Button 
-                    variant="outlined" 
+                    variant="contained" 
                     color="primary" 
-                    onClick={goHome}
+                    type="submit"
                     fullWidth
                     disabled={loading}
                     sx={{ py: 1.2, fontWeight: 'bold' }}
                   >
-                    Startseite
+                    {loading ? <CircularProgress size={24} color="inherit" /> : "Verifizieren"}
                   </Button>
-                  <Button 
-                    variant="contained" 
+                   <Button 
+                    variant="outlined" 
                     color="primary" 
-                    type="submit"
+                    onClick={goHome}
                     fullWidth
                     disabled={loading}
                     sx={{ py: 1.2, fontWeight: 'bold' }}
                   >
-                    {loading ? <CircularProgress size={24} color="inherit" /> : "Verifizieren"}
+                    Startseite
                   </Button>
                 </Stack>
               </Box>

src/Pages/Sonstige/RegestrationSucessfull.jsx

@@ -27,11 +27,13 @@ import useAuth from '../../context/useAuth';
 
 const style = {
     position: 'absolute',
-    top: '50%',
+    top: '10%',
     left: '50%',
-    transform: 'translate(-50%, -50%)',
+    transform: 'translate(-50%, 0)',
     width: { xs: '90%', sm: 450, md: 500 },
     maxWidth: '95%',
+    maxHeight: '85vh',
+    overflowY: 'auto',
     bgcolor: 'background.paper',
     border: '1px solid rgba(255, 255, 255, 0.1)',
     borderRadius: 2,

src/components/Forum/AddCategory.jsx

@@ -25,11 +25,13 @@ import useAuth from '../../context/useAuth';
 
 const style = {
     position: 'absolute',
-    top: '50%',
+    top: '10%',
     left: '50%',
-    transform: 'translate(-50%, -50%)',
+    transform: 'translate(-50%, 0)',
     width: { xs: '90%', sm: 450, md: 500 },
     maxWidth: '95%',
+    maxHeight: '85vh',
+    overflowY: 'auto',
     bgcolor: 'background.paper',
     border: '1px solid rgba(255, 255, 255, 0.1)',
     borderRadius: 2,

src/components/Forum/AddTopic.jsx

@@ -15,6 +15,9 @@ import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import EditIcon from '@mui/icons-material/Edit';
 import SaveIcon from '@mui/icons-material/Save';
 import CancelIcon from '@mui/icons-material/Cancel';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 
@@ -39,6 +42,8 @@ export default function Answer(props) {
   const [isEditing, setIsEditing] = useState(false);
   const [editContent, setEditContent] = useState(answer.content);
   const [saving, setSaving] = useState(false);
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const menuOpen = Boolean(menuAnchorEl);
 
   const isCreatorOrAdmin = auth.user === answer.creator || auth.roles === "Admin";
 
@@ -100,26 +105,35 @@ export default function Answer(props) {
         <Grid container spacing={2}>
           <Grid size={{ xs: 12 }}>
             <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
-              <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
+              <Stack direction="row" spacing={1.5} sx={{ alignItems: 'center', minWidth: 0 }}>
                 <Avatar 
                   alt={answer.creator ? answer.creator[0].toUpperCase() : 'U'} 
-                  sx={{ bgcolor: 'secondary.main', color: 'secondary.contrastText', width: 32, height: 32, fontWeight: 'bold', fontSize: '0.9rem' }}
+                  sx={{ bgcolor: 'secondary.main', color: 'secondary.contrastText', width: 32, height: 32, fontWeight: 'bold', fontSize: '0.9rem', flexShrink: 0 }}
                 />
-                <Box>
+                <Box sx={{ minWidth: 0 }}>
                   <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
                     {answer.creator}
+                    <Box component="span" sx={{ fontWeight: 400, color: 'text.secondary', ml: 1 }}>
+                      <Box component="span" sx={{ display: 'none', '@media (min-width: 450px)': { display: 'inline' } }}>
+                        {convertTimestamp(answer.creationDate)}
+                      </Box>
+                      <Box component="span" sx={{ display: 'inline', '@media (min-width: 450px)': { display: 'none' } }}>
+                        {convertTimestamp(answer.creationDate, true)}
+                      </Box>
+                    </Box>
                   </Typography>
-                  <Typography variant="caption" color="text.secondary">
-                    {convertTimestamp(answer.creationDate)}
-                    {answer.editDate && ` (bearbeitet am ${answer.editDate})`}
-                  </Typography>
+                  {answer.editDate && (
+                    <Typography variant="caption" color="text.secondary">
+                      bearbeitet am {answer.editDate}
+                    </Typography>
+                  )}
                 </Box>
               </Stack>
 
               {isCreatorOrAdmin && !saving && (
-                <Stack direction="row" spacing={0.5}>
+                <>
                   {isEditing ? (
-                    <>
+                    <Stack direction="row" spacing={0.5}>
                       <Tooltip title="Speichern">
                         <IconButton size="small" color="primary" onClick={handleSaveEdit}>
                           <SaveIcon fontSize="small" />
@@ -130,22 +144,32 @@ export default function Answer(props) {
                           <CancelIcon fontSize="small" />
                         </IconButton>
                       </Tooltip>
-                    </>
+                    </Stack>
                   ) : (
                     <>
-                      <Tooltip title="Antwort bearbeiten">
-                        <IconButton size="small" color="primary" onClick={() => setIsEditing(true)}>
-                          <EditIcon fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
-                      <Tooltip title="Antwort löschen">
-                        <IconButton size="small" color="error" onClick={handleDelete}>
-                          <DeleteForeverIcon fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
+                      <IconButton size="small" onClick={(e) => setMenuAnchorEl(e.currentTarget)}>
+                        <MoreVertIcon fontSize="small" />
+                      </IconButton>
+                      <Menu
+                        anchorEl={menuAnchorEl}
+                        open={menuOpen}
+                        onClose={() => setMenuAnchorEl(null)}
+                        onClick={() => setMenuAnchorEl(null)}
+                        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                      >
+                        <MenuItem onClick={() => setIsEditing(true)}>
+                          <EditIcon fontSize="small" sx={{ mr: 1 }} />
+                          Antwort bearbeiten
+                        </MenuItem>
+                        <MenuItem onClick={handleDelete} sx={{ color: 'error.main' }}>
+                          <DeleteForeverIcon fontSize="small" sx={{ mr: 1 }} />
+                          Antwort löschen
+                        </MenuItem>
+                      </Menu>
                     </>
                   )}
-                </Stack>
+                </>
               )}
             </Stack>
           </Grid>