The UI changing after I use Image Handler

[Mr94t3z]

Describe the bug

1. Without image handler:

   app.image('/', (c) => {
   return c.res({
   image: (
     <Box
           grow
           alignVertical="center"
           backgroundColor="bg"
           padding="48"
           textAlign="center"
           height="100%"
       >
       <Heading color="red" font="playfair_display" weight="900" align="center" size="64">
           REGEN 🍄 STATS
       </Heading>
     </Box>
   ),
   })
   })

   

2. Using image handler:

   
   app.frame('/', async (c) => {
   
   return c.res({
   title: 'Regen Stats',
   image: `/refreshing-image`,
   
   intents: [
     <TextInput placeholder="Search by username" />,
     <Button action='/stats'>My Stats</Button>,
     <Button value="oranges">Search</Button>,
     <Button.Link href='https://warpcast.com/0x94t3z.eth'>Creator</Button.Link>,
     <Button.Link href={CAST_INTENS}>Share</Button.Link>,
   ],
   })
   })

app.image('/refreshing-image', (c) => { return c.res({ imageOptions: { headers: { 'Cache-Control': 'max-age=0', }, }, image: ( <Box grow alignVertical="center" backgroundColor="bg" padding="48" textAlign="center" height="100%"

REGEN 🍄 STATS

), }) })

Link to Minimal Reproducible Example

https://github.com/Mr94t3z/regen-stats

Steps To Reproduce

No response

Frog Version

frog@v0.11.8

TypeScript Version

4.7.1

Check existing issues

• [X] I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[dalechyn]

could not reproduce the issue myself, but discovered a bug with Divider that sets wrong direction when not set explicitly. Had to put direction="horizontal" to make the frame appear in the first place.