fix: styling

src/pageComponents/Event/Event.stories.tsx

@@ -124,3 +124,10 @@ export const WithOccurrences: Story = {
     ],
   },
 }
+
+export const WithOccurrencesAndGroup: Story = {
+  args: {
+    ...WithOccurrences.args,
+    group: 'some_group',
+  },
+}

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

src/pageComponents/Event/styles.module.scss

@@ -14,6 +14,7 @@
 }
 
 .pills {
+  margin-top: 10px;
   display: flex;
   gap: 10px;
 }