How to fix the clumped up text? How to fix the background not going all the way down?

Question

In this code, my text on the sidebar side keeps no getting clumped up together. How can I fix that? Also, how can I extend the sidebar's background all the way to the point where it meets the footer like how the area main does. The whole page is set up in a grid from Grommet. I tried using padding and margin as shown in the code but it still does not work. I also tried some functions in the CSS but it still did not work.

import React from "react";
import { Grommet, Box, Grid, Heading, Paragraph, List, Text, Button, Form, FormField, TextInput } from "grommet";
import { Gremlin, LocationPin, FormNext, DocumentText } from "grommet-icons";
import { custom } from "grommet/themes";
import { deepMerge } from "grommet/utils";
import "./Purpleheader.css";
import "./TechnicalScholarshipApp.css";
import { Simple } from "./StatesForm";
import { Household } from "./Household";
import { Phone } from "./PhoneForm";
import { MainFooter } from "../Footer/Footer";

const data = [
    { text: "You are a graduating senior from Stranahan High School" },
    {
        text:
            "You will attend a certified educational institution this fall, with a definite one or two year goal in mind.  For example, x-ray tech, beautician, welder, etc. ",
    },
    { text: "You have completed the application and the attached the following:" },
];

const data2 = [
    { text2: "A copy of your Stranahan transcript, including the first semester of your senior year." },
    { text2: "Two letters of recommendation. One from an educator, one from a mentor, employer, or community member." },
    { text2: "A copy of your Federal Financial Aid form." },
    { text2: "A copy of your Stranahan transcript, including the first semester of your senior year." },
    { text2: "A short essay that addresses one of the following:" },
];

const data3 = [
    { text3: "One major accomplishment I have achieved and why it was important." },
    { text3: "One major obstacle in my life and how I overcame it." },
    { text3: "What impact my education at Stranahan has had on me." },
];

const data4 = [
    {
        text4:
            "These completed materials must be submitted in an envelope or organized folder to Ms. Lewis no later than Friday, March 3rd.",
    },
];

const customTheme = deepMerge(custom, {
    formField: {
        label: {
            requiredIndicator: true,
        },
    },
});

const TechnicalScholarshipApp = () => (
    <Grommet themes={custom}>
        <Box>
            <Grid className="PurpleHeader" rows={["xxsmall"]} areas={[["header"]]} gap="small">
                <Box background="brand" gridArea="header">
                    <h2>Technical/Vacational Scholarship Application </h2>
                </Box>
            </Grid>

            <Box className="bodypage">
                <Grid rows={["xlarge"]} columns={["1/2", "1/2"]} areas={[["sidebar", "main", "footer", "footer"]]}>
                    <Box background="light-5" gridArea="sidebar">
                        <Box pad={{ top: "medium", bottom: "large" }}>
                            <Heading textAlign="center">Stranahan Education Endowment Foundation</Heading>
                        </Box>
                        <Box pad={{ top: "large", left: "large" }}>
                            <Heading textAlign="center" size="small">
                                One or Two Year Scholarship Application
                            </Heading>
                        </Box>
                        <Box align="center" pad={{ bottom: "xlarge", top: "large" }}>
                            <Paragraph textAlign="center" size="large">
                                This form is for a five hundred dollar grant toward a technical, vocational or medical
                                career. Your application cannot be considered unless the following requirements are met:
                            </Paragraph>
                        </Box>
                        <Box pad={{ bottom: "xlarge", left: "small" }} align="center">
                            <List data={data} border={false}>
                                {(datum) => (
                                    <Box direction="row-responsive" gap="medium" align="center">
                                        <LocationPin size="large" />
                                        <Text weight="bold">{datum.text}</Text>
                                    </Box>
                                )}
                            </List>
                        </Box>
                        <Box pad={{ top: "xlarge", left: "large", right: "xlarge", bottom: "xlarge" }} align="center">
                            <List data={data2} pad="medium" border={false}>
                                {(datum) => (
                                    <Box direction="row-responsive" gap="medium" align="center">
                                        <FormNext size="large" />
                                        <Text weight="bold">{datum.text2}</Text>
                                    </Box>
                                )}
                            </List>
                        </Box>

                        <Box
                            pad={{ top: "xlarge", left: "medium", top: "xlarge", bottom: "xlarge" }}
                            align="center"
                            margin={{ top: "xlarge" }}
                        >
                            <List data={data3} pad="medium" border={false}>
                                {(datum) => (
                                    <Box direction="row-responsive" gap="medium" align="center">
                                        <DocumentText size="large" />
                                        <Text weight="bold">{datum.text3}</Text>
                                    </Box>
                                )}
                            </List>
                        </Box>

                        <Box
                            pad={{ top: "xlarge", left: "large", right: "xlarge" }}
                            align="center"
                            margin={{ top: "xlarge" }}
                        >
                            <List data={data4} pad="medium" border={false}>
                                {(datum) => (
                                    <Box direction="row-responsive" gap="medium" align="center">
                                        <FormNext size="large" />
                                        <Text weight="bold">{datum.text4}</Text>
                                    </Box>
                                )}
                            </List>
                        </Box>
                    </Box>
                    <Grommet theme={custom}>
                        <Box background="light-2" gridArea="main" className="mainForm">
                            <Box align="center" pad="large">
                                <Heading textAlign="center" size="small">
                                    One or Two Year Scholarship Application
                                </Heading>
                            </Box>
                            <Box align="center" pad="large">
                                <Form>
                                    <FormField name="firstName" htmlFor="firstName" label="First Name" required>
                                        <TextInput id="firstName" name="firstName" />
                                    </FormField>
                                    <FormField name="lastName" htmlFor="lastName" label="Last Name" required>
                                        <TextInput id="lastName" name="lastName" />
                                    </FormField>

                                    <FormField
                                        name="streetAddress"
                                        htmlFor="streetAddress"
                                        label="Street Address"
                                        required
                                    >
                                        <TextInput id="streetAddress" name="streetAddress" />
                                    </FormField>

                                    <FormField name="addressLine2" htmlFor="addressLine2" label="Address Line 2">
                                        <TextInput id="addressLine2" name="addressLine2" />
                                    </FormField>

                                    <FormField name="city" htmlFor="city" label="City" required>
                                        <TextInput id="city" name="city" />
                                    </FormField>

                                    <Box>
                                        <FormField name="zipCode" htmlFor="zipCode" label="Zip Code" required>
                                            <TextInput id="zipCode" name="zipCode" />
                                        </FormField>
                                    </Box>
                                    <Simple />

                                    <Phone />

                                    <FormField name="email" htmlFor="email" label="Email" required>
                                        <TextInput id="email" name="email" type="email" />
                                    </FormField>

                                    <Household />

                                    <FormField
                                        name="mothersOccupation"
                                        htmlFor="mothersOccupaton"
                                        label="Mothers Occupation"
                                    >
                                        <TextInput id="mothersOccupation" name="mothersOccupation" />
                                    </FormField>
                                    <FormField
                                        name="fathersOccupation"
                                        htmlFor="fathersOccupaton"
                                        label="Fathers Occupation"
                                    >
                                        <TextInput id="fathersOccupation" name="fathersOccupation" />
                                    </FormField>

                                    <Button type="submit" label="Submit" primary />
                                    <Text margin={{ left: "small" }} size="small" color="status-critical">
                                        * Required Field
                                    </Text>
                                </Form>
                                <Box gridArea="footer" pad={{ top: "large" }}>
                                    <MainFooter />
                                </Box>
                            </Box>
                        </Box>
                    </Grommet>
                </Grid>
            </Box>
        </Box>
    </Grommet>
);

export default TechnicalScholarshipApp;

Answer 1

Short answers:

How to fix clumped-up text?

Understand the behavior of CSS flexbox, and control it better on your app. Usage of flex={false} solved your clumped-up text.

How to fix the background not going all the way down

This behavior was resulted in setting hard-coded row height within your grid. So rows={["xlarge"]} resulted in this behavior, changing it to rows="auto" fixed the problem, and now all the content inside this grid cell is included in the background.

Longer answer:

Regardless of these two fixes, I wasn't able to get the full picture of your problem since your code includes many other components and stylesheets that are not part of the code you shared. Few things I picked up on that you'd might want to invest some time fixings are:

1. Learn more about Heading levels and sizes for better accessibility support, I fixed some of the issues in that area with the code you shared but it might need more attention.
2. After adding flex={false} to avoid clumped-up text, the pad setters were redundant, so you can clean up those easily by removing the pad prop.
3. With a clean grommet app, you are not really supposed to use a stylesheet, I suggest learning how to leverage the theme power instead.
4. Instead of using multiple Grommet components to switch themes, try to use ThemeContext instead.

Here is a quick snippet of the cleaned up code that solves your problem (although I think it needs more clean-ups, it does the tricks you expect it too)

import React from "react";
import { render } from "react-dom";

import {
  Grommet,
  Box,
  Grid,
  Heading,
  Paragraph,
  List,
  Text,
  Button,
  Form,
  FormField,
  TextInput
} from "grommet";
import { LocationPin, FormNext, DocumentText } from "grommet-icons";
import { custom } from "grommet/themes";
import { deepMerge } from "grommet/utils";

const data = [
  { text: "You are a graduating senior from Stranahan High School" },
  {
    text:
      "You will attend a certified educational institution this fall, with a definite one or two year goal in mind.  For example, x-ray tech, beautician, welder, etc. "
  },
  { text: "You have completed the application and the attached the following:" }
];

const data2 = [
  {
    text2:
      "A copy of your Stranahan transcript, including the first semester of your senior year."
  },
  {
    text2:
      "Two letters of recommendation. One from an educator, one from a mentor, employer, or community member."
  },
  { text2: "A copy of your Federal Financial Aid form." },
  {
    text2:
      "A copy of your Stranahan transcript, including the first semester of your senior year."
  },
  { text2: "A short essay that addresses one of the following:" }
];

const data3 = [
  {
    text3: "One major accomplishment I have achieved and why it was important."
  },
  { text3: "One major obstacle in my life and how I overcame it." },
  { text3: "What impact my education at Stranahan has had on me." }
];

const data4 = [
  {
    text4:
      "These completed materials must be submitted in an envelope or organized folder to Ms. Lewis no later than Friday, March 3rd."
  }
];

const customTheme = deepMerge(custom, {
  formField: {
    label: {
      requiredIndicator: true
    }
  }
});

const App = () => (
  <Grommet themes={customTheme} full style={{ height: "auto", width: "100%" }}>
    <Box fill>
      <Grid rows={["xsmall"]} areas={[["header"]]} gap="small">
        <Box background="brand" gridArea="header">
          <h2>Technical/Vacational Scholarship Application </h2>
        </Box>
      </Grid>

      <Box className="bodypage" fill>
        <Grid
          rows="auto"
          columns={["1/2", "1/2"]}
          areas={[["sidebar", "main", "footer", "footer"]]}
        >
          <Box background="light-5" gridArea="sidebar" fill>
            <Box flex={false}>
              <Heading textAlign="center">
                Stranahan Education Endowment Foundation
              </Heading>
            </Box>
            <Box pad={{ top: "large", left: "large" }} flex={false}>
              <Heading textAlign="center" level={2}>
                One or Two Year Scholarship Application
              </Heading>
            </Box>
            <Box align="center" flex={false}>
              <Paragraph textAlign="center" size="large">
                This form is for a five hundred dollar grant toward a technical,
                vocational or medical career. Your application cannot be
                considered unless the following requirements are met:
              </Paragraph>
            </Box>
            <Box align="center">
              <List data={data} border={false}>
                {(datum) => (
                  <Box direction="row-responsive" gap="medium" align="center">
                    <LocationPin size="large" />
                    <Text weight="bold">{datum.text}</Text>
                  </Box>
                )}
              </List>
            </Box>
            <Box align="center">
              <List data={data2} pad="medium" border={false}>
                {(datum) => (
                  <Box direction="row-responsive" gap="medium" align="center">
                    <FormNext size="large" />
                    <Text weight="bold">{datum.text2}</Text>
                  </Box>
                )}
              </List>
            </Box>

            <Box align="center">
              <List data={data3} pad="medium" border={false}>
                {(datum) => (
                  <Box direction="row-responsive" gap="medium" align="center">
                    <DocumentText size="large" />
                    <Text weight="bold">{datum.text3}</Text>
                  </Box>
                )}
              </List>
            </Box>

            <Box align="center" margin={{ top: "xlarge" }}>
              <List data={data4} border={false}>
                {(datum) => (
                  <Box direction="row-responsive" gap="medium" align="center">
                    <FormNext size="large" />
                    <Text weight="bold">{datum.text4}</Text>
                  </Box>
                )}
              </List>
            </Box>
          </Box>
          <Box background="light-2" gridArea="main" className="mainForm" fill>
            <Box align="center">
              <Heading textAlign="center" size="small">
                One or Two Year Scholarship Application
              </Heading>
            </Box>
            <Box align="center" pad="large">
              <Form>
                <FormField
                  name="firstName"
                  htmlFor="firstName"
                  label="First Name"
                  required
                >
                  <TextInput id="firstName" name="firstName" />
                </FormField>
                <FormField
                  name="lastName"
                  htmlFor="lastName"
                  label="Last Name"
                  required
                >
                  <TextInput id="lastName" name="lastName" />
                </FormField>

                <FormField
                  name="streetAddress"
                  htmlFor="streetAddress"
                  label="Street Address"
                  required
                >
                  <TextInput id="streetAddress" name="streetAddress" />
                </FormField>

                <FormField
                  name="addressLine2"
                  htmlFor="addressLine2"
                  label="Address Line 2"
                >
                  <TextInput id="addressLine2" name="addressLine2" />
                </FormField>

                <FormField name="city" htmlFor="city" label="City" required>
                  <TextInput id="city" name="city" />
                </FormField>

                <Box>
                  <FormField
                    name="zipCode"
                    htmlFor="zipCode"
                    label="Zip Code"
                    required
                  >
                    <TextInput id="zipCode" name="zipCode" />
                  </FormField>
                </Box>

                <FormField name="email" htmlFor="email" label="Email" required>
                  <TextInput id="email" name="email" type="email" />
                </FormField>

                <FormField
                  name="mothersOccupation"
                  htmlFor="mothersOccupaton"
                  label="Mothers Occupation"
                >
                  <TextInput id="mothersOccupation" name="mothersOccupation" />
                </FormField>
                <FormField
                  name="fathersOccupation"
                  htmlFor="fathersOccupaton"
                  label="Fathers Occupation"
                >
                  <TextInput id="fathersOccupation" name="fathersOccupation" />
                </FormField>

                <Button type="submit" label="Submit" primary />
                <Text
                  margin={{ left: "small" }}
                  size="small"
                  color="status-critical"
                >
                  * Required Field
                </Text>
              </Form>
              <Box gridArea="footer" pad={{ top: "large" }}></Box>
            </Box>
          </Box>
        </Grid>
      </Box>
    </Box>
  </Grommet>
);

render(<App />, document.getElementById("root"));

Copy/paste this code to this template and it should work as expected.