From c537fcbb8184bb72cddeeb00a118edf1082f4640 Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Thu, 16 Jul 2026 15:58:32 +0200
Subject: [PATCH] fix: styling

---
 src/pageComponents/Event/Event.stories.tsx  |  7 +++++++
 src/pageComponents/Event/Event.tsx          | 15 ++++++++-------
 src/pageComponents/Event/styles.module.scss |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/pageComponents/Event/Event.stories.tsx b/src/pageComponents/Event/Event.stories.tsx
index a0b8ccd..3865f2b 100644
--- a/src/pageComponents/Event/Event.stories.tsx
+++ b/src/pageComponents/Event/Event.stories.tsx
@@ -123,4 +123,11 @@ export const WithOccurrences: Story = {
       },
     ],
   },
+}
+
+export const WithOccurrencesAndGroup: Story = {
+  args: {
+    ...WithOccurrences.args,
+    group: 'some_group',
+  },
 }
\ No newline at end of file
diff --git a/src/pageComponents/Event/Event.tsx b/src/pageComponents/Event/Event.tsx
index c1aaf7c..a6a8b41 100644
--- a/src/pageComponents/Event/Event.tsx
+++ b/src/pageComponents/Event/Event.tsx
@@ -6,7 +6,7 @@ import { Container } from '@/components/Container/Container'
 import { Col } from '@/components/Flex/Col'
 import { Pill } from '@/components/Pill/Pill'
 import { useDate } from '@/hooks/useCompactDate'
-import { readableDateTime } from '@/utils/readableDate'
+import { formatEventDate } from '@/utils/formatEventDate'
 import { TextDiv } from '@/components/Text/TextDiv'
 import { Button } from '@/components/Button/Button'
 import Image, { StaticImageData } from 'next/image'
@@ -72,7 +72,7 @@ export function EventPage(
   }: EventProps
 ) {
   const published = useDate(createdAt)
-  const readableDate = readableDateTime(date, endDateTime)
+  const readableDate = formatEventDate(new Date(date), endDateTime ? new Date(endDateTime) : undefined, "long")
   const where = locationString(location);
   const contactPersonPhoto = typeof contact === "object" ? getPhoto("thumbnail", contact.photo) : undefined;
   const isRecurring = recurrenceType && recurrenceType !== 'none'
@@ -93,12 +93,13 @@ export function EventPage(
 
           <div className={styles.header}>
             <div className={styles.headerText}>
-              <p>
-                {shortDescription}
-              </p>
-              <p className={styles.published}>
+
+              <div className={styles.published}>
                 Publiziert am {published}
-              </p>
+              </div>
+              <div>
+                {shortDescription}
+              </div>
 
               <div className={styles.pills}>
                 { isRecurring &&
diff --git a/src/pageComponents/Event/styles.module.scss b/src/pageComponents/Event/styles.module.scss
index 85e0842..59e5af8 100644
--- a/src/pageComponents/Event/styles.module.scss
+++ b/src/pageComponents/Event/styles.module.scss
@@ -14,6 +14,7 @@
 }
 
 .pills {
+  margin-top: 10px;
   display: flex;
   gap: 10px;
 }