Misaligned footer section

[gtsiolis]

Problem

Visiting directly https://www.gitpod.io/pricing/#self-hosted or reloading the pricing page causes a misalignment of the Explore Gitpod footer section.

See also relevant discussion (internal).

Expected	Rendered

[nisarhassan12]

It looks like a production issue i.e in development on the dev server preview I'm unable to reproduce this I tried re-loading and also visiting /pricing/#self-hosted directly many times.

[nisarhassan12]

In production somehow the styles added via emotion does not get added i.e I don't see any auto-generated class like css-1aqcnu0-StyledPricingLinks on the section element. This might have something to do with SSR.

All of the stuff shown below in this styled block is not getting applied:

const StyledPricingLinks = styled.section`
  max-width: 850px;
  display: flex;
  align-items: center;
  margin: 0 auto;

  @media (max-width: ${sizes.breakpoints.md}) {
    padding-bottom: 8rem;
  }

  @media (max-width: 720px) {
    flex-direction: column;
    text-align: center;
    max-width: 550px;

    .btn-wrapper {
      justify-content: center;
    }
  }

  img {
    flex: 1;
    height: 12rem;

    @media (max-width: 720px) {
      max-width: 10rem;
      margin-bottom: 2rem;
    }
  }

  div {
    flex: 0 0 75%;
    padding-left: 4rem;
    border-left: ${borders.bold};

    @media (max-width: 720px) {
      border-left: none;
      padding-left: 0;
    }
  }

  h2 {
    margin-bottom: 5rem;
  }

  h3 {
    font-size: 110%;
    margin-bottom: 0.5rem;
  }
`