Rows / Columns aren't properly configured for 1:1 AR frames.

[huntertdiamond]

Describe the bug

I'm attempting to create a grid with a 1:1 aspect ratio using the Row/Rows and Column/Columns exposed by createSystem, but am unable to get the rows to stay within the bounds of the frame.

With a 1:1 aspect ratio provided in new Frog({})

With default 1.91:1 aspect ratio

Here is the boilerplate

import { Column, Columns, Row, Rows, vars } from "../ui.js";
import { Button, Frog } from "frog";

export const homeRoute = new Frog({
  ui: { vars },
  imageAspectRatio: "1:1",
});

homeRoute.frame("/", (c) => {
  return c.res({
    image: (
      <Rows gap="4" width="100%" height="100%">
        {[...Array(4)].map((_, rowIndex) => (
          <Row backgroundColor="two" height="1/4" width="100%">
            <Columns
              gap="1"
              width="100%"
              height="100%"
              alignHorizontal="center"
              alignVertical="center"
            >
              {[...Array(4)].map((_, colIndex) => (
                <Column backgroundColor="eight" width="1/4">
                  {colIndex + 1 + rowIndex * 4}
                </Column>
              ))}
            </Columns>
          </Row>
        ))}
      </Rows>
    ),
    intents: [
      <Button.Link href="https://www.example.com/">Link </Button.Link>,
      <Button value="learn" action="/example">
        Button Press
      </Button>,
    ],
  });
});

Link to Minimal Reproducible Example

https://gist.github.com/huntertdiamond/db1624e98a589373e16398250fe2e179

Steps To Reproduce

provided above

Frog Version

latest

TypeScript Version

No response

Check existing issues

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

Anything else?

No response

[dalechyn]

Since not a full minimal reproducible example was provided (ui.ts file is missing), i'm assuming that you haven't specified frame dimensions there.

I've tried to reproduce it at https://github.com/dalechyn/29may-frog, but was unable to.