Making a Material UI Page Compact (Reducing spacing, making form-groups flex and using smaller headers)

#1412 – Taskcluster Bug (PR #1449)


In an effort to start to start the ball rolling on #835, I think we can start by working on the quickstart view (e.g.,

The main task may involve making use of extra spacing between sections, adding dividers/borders, changing header variants, etc. to make the form easier to read.

Initial conversation:


I could do whatever felt like.. so it was time to be artistic!

I made a series of change:



 Reduced Spacing around main heading:



Made the checkboxes flex to use space efficiently:



 Reduced spacing in general between all list items:

And in the end.. Before:


  1. Reduced Spacing.
  2. Stopped using ListSubHeader.
  3. Made checkboxes flex to consume space efficiently.

The code that did all this for me:

 taskShouldRunFlex: {
    display: 'flex',
    width: '100%',
    justifyContent: 'space-between',
    [theme.breakpoints.down('xs')]: {
      flexDirection: 'column',
  formLabelSpacing: {
    marginTop: -0.5 * theme.spacing.unit,
    marginBottom: -0.5 * theme.spacing.unit,
    marginRight: 4 * theme.spacing.triple,
    [theme.breakpoints.down('sm')]: {
      marginRight: theme.spacing.double,
  mainHeading: {
    marginTop: -theme.spacing.triple,
  generalSpacing: {
    marginTop: -2 * theme.spacing.unit,

The changes mostly involved changes in CSS and then applying the appropriate classes everywhere.

This was one fun issue to solve!

Written with love,
Rishabh Budhiraja

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s