fix: render grid as flex

src/components/MassTable/MassGrid.stories.ts

@@ -0,0 +1,300 @@
+import { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { MassGrid } from './MassGrid'
+
+const meta: Meta<typeof MassGrid> = {
+  component: MassGrid,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    locations: [
+      {
+        id: 'clara',
+        name: 'St. Clara',
+        masses: [
+          {
+            id: '1',
+            date: '2024-08-21T15:00:00.000Z',
+            location: 'St. Clara',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '2',
+            date: '2024-08-23T18:00:00.000Z',
+            location: 'St. Clara',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '3',
+            date: '2024-08-24T09:00:00.000Z',
+            location: 'St. Clara',
+            type: 'WORD',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'christopherus',
+        name: 'St. Christopherus',
+        masses: [
+          {
+            id: '4',
+            date: '2024-08-22T10:00:00.000Z',
+            location: 'St. Christopherus',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '5',
+            date: '2024-08-25T17:00:00.000Z',
+            location: 'St. Christopherus',
+            type: 'FAMILY',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '6',
+            date: '2024-08-26T15:00:00.000Z',
+            location: 'St. Christopherus',
+            type: 'MASS',
+            cancelled: true,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'marien',
+        name: 'St. Marien',
+        masses: [
+          {
+            id: '7',
+            date: '2024-08-23T11:00:00.000Z',
+            location: 'St. Marien',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '8',
+            date: '2024-08-24T19:00:00.000Z',
+            location: 'St. Marien',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+    ],
+  },
+}
+
+export const SingleLocation: Story = {
+  args: {
+    locations: [
+      {
+        id: 'clara',
+        name: 'St. Clara',
+        masses: [
+          {
+            id: '1',
+            date: '2024-08-21T15:00:00.000Z',
+            location: 'St. Clara',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '2',
+            date: '2024-08-23T18:00:00.000Z',
+            location: 'St. Clara',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+    ],
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    locations: [],
+  },
+}
+
+export const SevenChurches: Story = {
+  args: {
+    locations: [
+      {
+        id: 'clara',
+        name: 'St. Clara',
+        masses: [
+          {
+            id: '1',
+            date: '2024-08-21T15:00:00.000Z',
+            location: 'St. Clara',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '2',
+            date: '2024-08-24T09:00:00.000Z',
+            location: 'St. Clara',
+            type: 'WORD',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'christopherus',
+        name: 'St. Christopherus',
+        masses: [
+          {
+            id: '3',
+            date: '2024-08-22T10:00:00.000Z',
+            location: 'St. Christopherus',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '4',
+            date: '2024-08-25T17:00:00.000Z',
+            location: 'St. Christopherus',
+            type: 'FAMILY',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'marien',
+        name: 'St. Marien',
+        masses: [
+          {
+            id: '5',
+            date: '2024-08-23T11:00:00.000Z',
+            location: 'St. Marien',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'johannes',
+        name: 'St. Johannes Nepomuk II',
+        masses: [
+          {
+            id: '6',
+            date: '2024-08-21T18:00:00.000Z',
+            location: 'St. Johannes Nepomuk II',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '7',
+            date: '2024-08-24T10:30:00.000Z',
+            location: 'St. Johannes Nepomuk II',
+            type: 'MASS',
+            cancelled: true,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'peter',
+        name: 'St. Peter',
+        masses: [
+          {
+            id: '8',
+            date: '2024-08-22T08:00:00.000Z',
+            location: 'St. Peter',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '9',
+            date: '2024-08-25T11:00:00.000Z',
+            location: 'St. Peter',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'paul',
+        name: 'St. Paulus Of the holy Cross',
+        masses: [
+          {
+            id: '10',
+            date: '2024-08-23T17:00:00.000Z',
+            location: 'St. Paul',
+            type: 'WORD',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+      {
+        id: 'elisabeth',
+        name: 'St. Elisabeth',
+        masses: [
+          {
+            id: '11',
+            date: '2024-08-24T19:00:00.000Z',
+            location: 'St. Elisabeth',
+            type: 'FAMILY',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+          {
+            id: '12',
+            date: '2024-08-26T09:00:00.000Z',
+            location: 'St. Elisabeth',
+            type: 'MASS',
+            cancelled: false,
+            updatedAt: '',
+            createdAt: '',
+          },
+        ],
+      },
+    ],
+  },
+}

src/components/MassTable/MassGrid.tsx

@@ -1,11 +1,29 @@
+import { Worship } from '@/payload-types'
+import { MassTable } from '@/components/MassTable/MassTable'
 import styles from './massgrid.module.scss'
 
-type MassGridProps = {
+export type MassGridLocation = {
-  children: React.ReactNode
+  id: string
+  name: string
+  masses: Worship[]
 }
 
-export const MassGrid = ({ children }: MassGridProps) => {
+type MassGridProps = {
-  return <div className={styles.container}>
+  locations: MassGridLocation[]
-    <div className={styles.grid}>{children}</div>
+}
-  </div>
+
+export const MassGrid = ({ locations }: MassGridProps) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid}>
+        {locations.map((location) => (
+          <MassTable
+            key={location.id}
+            location={location.name}
+            masses={location.masses}
+          />
+        ))}
+      </div>
+    </div>
+  )
 }

src/components/MassTable/massgrid.module.scss

@@ -1,9 +1,9 @@
 .grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fit, 200px);
+  flex-wrap: wrap;
   justify-content: center;
   column-gap: 30px;
-  row-gap: 15px;
+  row-gap: 30px;
 }
 
 .container {

src/components/MassTable/styles.module.scss

@@ -18,6 +18,12 @@
 .location {
   font-size: 22px;
   font-weight: 700;
+  line-height: 1em;
+  height: 70px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: center;
 }
 
 .cancelled {
@@ -43,8 +49,8 @@
 
 .table {
   width: 200px;
-  display: grid;
+  display: flex;
-  grid-row: span 3;
+  flex-direction: column;
-  grid-template-rows: subgrid;
+  align-items: center;
-  justify-items: center;
+  gap: 10px;
 }

src/compositions/Blocks/MassTimesBlock.tsx

@@ -6,7 +6,6 @@ import { perParish } from '@/utils/dto/perParish'
 import { Section } from '@/components/Section/Section'
 import { Title } from '@/components/Title/Title'
 import { MassGrid } from '@/components/MassTable/MassGrid'
-import { MassTable } from '@/components/MassTable/MassTable'
 import { PopupButton } from '@/components/PopupButton/PopupButton'
 import { Button } from '@/components/Button/Button'
 import moment from 'moment'
@@ -82,15 +81,13 @@ export async function MassTimesBlock({
       />
 
       <Section padding={'small'}>
-        <MassGrid>
+        <MassGrid
-          {worshipPerLocation.map((value) => (
+          locations={worshipPerLocation.map(([id, group]) => ({
-            <MassTable
+            id,
-              key={value[0]}
+            name: group.name,
-              location={value[1].name}
+            masses: group.masses,
-              masses={value[1].masses}
+          }))}
         />
-          ))}
-        </MassGrid>
       </Section>
 
       <Section padding={'small'}>

src/pageComponents/Home/HomeView.tsx

@@ -6,7 +6,6 @@ import { MainText } from '@/components/MainText/MainText'
 import { HR } from '@/components/HorizontalRule/HorizontalRule'
 import { Title } from '@/components/Title/Title'
 import { MassGrid } from '@/components/MassTable/MassGrid'
-import { MassTable } from '@/components/MassTable/MassTable'
 import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider'
 import { blogToSlides } from '@/utils/dto/blog'
 import forest from '@/assets/map.jpg'
@@ -111,9 +110,13 @@ export const HomeView = ({
         />
 
         <Section padding={'small'}>
-          <MassGrid>
+          <MassGrid
-            {worshipPerLocation.map(value => <MassTable key={value[0]} location={value[0]} masses={value[1]} />)}
+            locations={worshipPerLocation.map(([name, masses]) => ({
-          </MassGrid>
+              id: name,
+              name,
+              masses,
+            }))}
+          />
         </Section>
 
         <Section padding={'small'}>