Kopfaktionen sauber ausrichten

src/components/dashboard/dashboard-shell.tsx

@@ -3970,35 +3970,14 @@ export function DashboardShell({
             }}
           >
             <CardContent sx={{ px: { xs: 2.5, md: 3 }, py: { xs: 2.5, md: 2.75 }, position: "relative" }}>
-              {viewer.role === "ORGA" ? (
-                <IconButton
-                  aria-label="Zuständigkeiten und Benachrichtigungen"
-                  sx={{
-                    position: "absolute",
-                    top: { xs: 14, md: 16 },
-                    right: { xs: 14, md: 18 },
-                    width: 38,
-                    height: 38,
-                    border: `1px solid ${alpha("#FFFFFF", 0.28)}`,
-                    color: "white",
-                    bgcolor: alpha("#FFFFFF", 0.08),
-                    "&:hover": {
-                      bgcolor: alpha("#FFFFFF", 0.16)
-                    }
-                  }}
-                  onClick={() => setIsOrgaSettingsOpen(true)}
-                >
-                  <SettingsRoundedIcon />
-                </IconButton>
-              ) : null}
               <Stack spacing={1.6}>
                 <Stack
                   direction={{ xs: "column", md: "row" }}
                   justifyContent="space-between"
-                  alignItems={{ xs: "flex-start", md: "center" }}
+                  alignItems={{ xs: "flex-start", md: "flex-start" }}
                   gap={1.5}
                 >
-                  <Box sx={{ maxWidth: 760, pr: viewer.role === "ORGA" ? { xs: 6, md: 0 } : 0 }}>
+                  <Box sx={{ maxWidth: 760 }}>
                     <Typography
                       variant="h1"
                       sx={{
@@ -4017,9 +3996,27 @@ export function DashboardShell({
                       {`Aktuelle \u00dcbersicht: ${currentPeriod?.name ?? "Zeitraum fehlt"}.`}
                     </Typography>
                   </Box>
-                  <Stack direction={{ xs: "column", sm: "row" }} gap={0.8} alignItems={{ sm: "center" }}>
+                  <Stack direction={{ xs: "row", sm: "row" }} gap={0.8} alignItems="center" useFlexGap flexWrap="wrap" justifyContent={{ md: "flex-end" }}>
-	                    {viewer.approvalPermissions.length > 0 ? (
+                    {viewer.role === "ORGA" ? (
-	                      <Button
+                      <IconButton
+                        aria-label="Zuständigkeiten und Benachrichtigungen"
+                        sx={{
+                          width: 38,
+                          height: 38,
+                          border: `1px solid ${alpha("#FFFFFF", 0.28)}`,
+                          color: "white",
+                          bgcolor: alpha("#FFFFFF", 0.08),
+                          "&:hover": {
+                            bgcolor: alpha("#FFFFFF", 0.16)
+                          }
+                        }}
+                        onClick={() => setIsOrgaSettingsOpen(true)}
+                      >
+                        <SettingsRoundedIcon />
+                      </IconButton>
+                    ) : null}
+                    {viewer.approvalPermissions.length > 0 ? (
+                      <Button
                         type="button"
                         size="small"
                         variant={pushStatus === "enabled" ? "contained" : "outlined"}
@@ -4029,9 +4026,9 @@ export function DashboardShell({
                         onClick={handleEnablePushNotifications}
                       >
                         {pushStatus === "enabled" ? "Web Push aktiv" : "Freigabe-Push"}
-	                      </Button>
+                      </Button>
-	                    ) : null}
+                    ) : null}
-	                    <Chip
+                    <Chip
                       label={`${viewer.username} - ${roleLabel(viewer.role)}`}
                       sx={{ bgcolor: alpha("#FFFFFF", 0.14), color: "white", fontWeight: 700, maxWidth: "100%" }}
                     />