remove ugly margin on eventCard, optimize board images

components/boardMemberCard.jsx

 import { useRouter } from "next/router";
+import Image from "next/image";
 
 import { Avatar, Button, Paper, Text, useMantineTheme } from "@mantine/core";
 
@@ -28,7 +29,24 @@ export default function BoardMemberCard({ entry }) {
       shadow="sm"
     >
       <div>
-        <Avatar src={entry.image} size={120} radius={20} mx="auto" />
+        <div
+          style={{
+            width: "120px",
+            height: "120px",
+            borderRadius: "1rem",
+            margin: "auto",
+            overflow: "hidden",
+          }}
+        >
+          <Image
+            src={entry.image}
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "30rem", maxWidth: "100%", height: "auto" }}
+            alt={entry.name}
+          />
+        </div>
         <Text ta="center" fz="lg" weight={500} mt="md">
           {entry.name}
         </Text>

components/eventCard.jsx

@@ -153,7 +153,7 @@ export default function EventCard({
       </div>
       <div>
         {!event.isStammtisch && (
-          <Group style={{ verticalAlign: "middle", marginTop: "20px" }} grow>
+          <Group mt="xl" style={{ verticalAlign: "middle" }} grow>
             {event.signUp ? (
               <Button
                 href={event.signUp}
@@ -185,28 +185,26 @@ export default function EventCard({
             )}
           </Group>
         )}
-        <Group grow mt="md" style={{ verticalAlign: "middle" }}>
-          {hasAccess(session, true) && (
-            <>
+        {hasAccess(session, true) && (
+          <Group grow mt="md" style={{ verticalAlign: "middle" }}>
+            <Button
+              leftIcon={<Icon icon={ICONS.EDIT} color={accentColor} />}
+              variant="light"
+              onClick={() => editEvent(event)}
+            >
+              {t("editEvent")}
+            </Button>
+            {!event.isStammtisch && (
               <Button
-                leftIcon={<Icon icon={ICONS.EDIT} color={accentColor} />}
+                leftIcon={<Icon icon={ICONS.LIST} color={accentColor} />}
                 variant="light"
-                onClick={() => editEvent(event)}
+                onClick={() => viewSignUps(event)}
               >
-                {t("editEvent")}
+                {t("viewParticipants")}
               </Button>
-              {!event.isStammtisch && (
-                <Button
-                  leftIcon={<Icon icon={ICONS.LIST} color={accentColor} />}
-                  variant="light"
-                  onClick={() => viewSignUps(event)}
-                >
-                  {t("viewParticipants")}
-                </Button>
-              )}
-            </>
-          )}
-        </Group>
+            )}
+          </Group>
+        )}
       </div>
     </Card>
   );