From 18c56f9cf36fdaea1e7f688ab50466adbb83d82d Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sun, 19 May 2024 16:48:36 -0500
Subject: [PATCH] fix render event styling

---
 client/src/events.tsx | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/src/events.tsx b/client/src/events.tsx
index 47a97ca..2080c4c 100644
--- a/client/src/events.tsx
+++ b/client/src/events.tsx
@@ -1,4 +1,4 @@
-import { Avatar, IconButton, ImageList, ImageListItem, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
+import { Avatar, IconButton, ImageList, ImageListItem, ListItem, ListItemAvatar, ListItemText, Stack, Typography } from '@mui/material';
 import React, { Fragment, MutableRefObject } from 'react';
 
 import { Maybe, doesExist } from '@apextoaster/js-utils';
@@ -192,24 +192,26 @@ export function RenderEventItem(props: EventItemProps) {
         <Camera />
       </Avatar>
     </ListItemAvatar>
-    <ListItemText
-      primary={title}
-      secondary={
-        <Typography
-          sx={{ display: 'block' }}
-          component="span"
-          variant="body2"
-          color="text.primary"
-        >{prompt}</Typography>
-      }
-    />
-    <ImageList cols={3} rowHeight={256}>
-      {Object.entries(images).map(([name, image]) => <ImageListItem key={name}>
-        <a href='#' onClick={() => openImage(image as string)}>
-          <img src={`data:image/jpeg;base64,${image}`} alt="Render" style={{ maxHeight: 256, maxWidth: 256 }} />
-        </a>
-      </ImageListItem>)}
-    </ImageList>
+    <Stack direction="column" spacing={2}>
+      <ListItemText
+        primary={title}
+        secondary={
+          <Typography
+            sx={{ display: 'block' }}
+            component="span"
+            variant="body2"
+            color="text.primary"
+          >{prompt}</Typography>
+        }
+      />
+      <ImageList cols={3} rowHeight={256}>
+        {Object.entries(images).map(([name, image]) => <ImageListItem key={name}>
+          <a href='#' onClick={() => openImage(image as string)}>
+            <img src={`data:image/jpeg;base64,${image}`} alt="Render" style={{ maxHeight: 256, maxWidth: 256 }} />
+          </a>
+        </ImageListItem>)}
+      </ImageList>
+    </Stack>
   </ListItem>;
 }