CSS Grid test linc

by Tom Söderlund

HTML

<html lang="en" style="--vh:7.36px;">
  <head>
    <title>Chat view</title>
    <style id="__jsx-2861964485">
      .conversation.jsx-2861964485 {
        display: grid;
        grid-template-rows: auto 1fr;
        background-color: #fafafa;
        height: 100%;
      }

      .messages-and-quote.jsx-2861964485 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
      }

      @media only screen and (max-width:670px) {
        .messages-and-quote.jsx-2861964485 {
          display: grid;
          grid-template-columns: auto;
          grid-template-rows: 1fr 0;
        }

        .messages-and-quote.jsx-2861964485>*:nth-child(2) {
          display: none;
        }
      }

    </style>
    <style id="__jsx-1821247239">
      .Toastify__toast {
        border-radius: 0.5em;
        box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3);
        padding: 0.8em;
        background-color: lemonchiffon;
        color: black;
      }

      .Toastify__toast--success {
        background-color: greenyellow;
        color: black;
      }

      .Toastify__toast--warning {
        background-color: darkorange;
        color: white;
      }

      .Toastify__toast--error {
        background-color: tomato;
        color: white;
      }

      .frames.jsx-1821247239 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        height: 100%;
      }

      main.jsx-1821247239 {
        padding: 0 0;
      }

      @media only screen and (max-width:670px) {
        .frames.jsx-1821247239 {
          grid-template-columns: auto;
          grid-template-rows: auto;
        }

        main.jsx-1821247239 {
          padding-top: 0;
        }
      }

    </style>
    <style type="text/css" data-styled-jsx="">
      form.jsx-2067117200 {
        background-color: #c4c4c4;
        padding: 1em;
        -webkit-transition: ease 1s;
        transition: ease 1s;
        display: -webkit-box;
        display:...

CSS

/* ===== Nice & Simple CSS: https://github.com/tomsoderlund/niceandsimple-css ===== */

/* ----- Reset ----- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  touch-action: manipulation;
}

/* ----- Layout ----- */

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body #__next {
  height: 100%;
}

/* #NiceAndSimple: Main - margin:auto */
main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

@media only screen and (max-width: 670px) {
  body {
    /* background-color: #272a7b; */
  }

  main {
    background-color: white;
    color: black;
  }
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.flex.column {
  flex-direction: column;
}

.flex>* {
  flex: 1;
  width: 100%;
  margin-right: 1em;
}

.flex>*:last-child {
  margin-right: unset;
}

@media only screen and (max-width: 670px) {
  .flex {
    flex-direction: column;
  }

  .flex>* {
    margin-right: unset;
  }
}

/* ----- Typography ----- */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

p {
  margin: 1em 0;
  line-height: 1.4em;
}

h1,
h2,
h3 {
  line-height: 1.1em;
  margin: 1.1em 0 0.4em;
}

/* ----- Elements ----- */

/* #NiceAndSimple: Links */
a {
  color: dodgerblue;
  text-decoration: none;
  border-bottom: 1px dotted dodgerblue;
  transition: all 0.2s;
  cursor: pointer;
}

a:hover {
  filter: brightness(110%);
  border-bottom-style: solid;
}

/* #NiceAndSimple: Button - https://codepen.io/tomsoderlund/pen/qqyzqp */
button,
.button {
  position: relative;
  background-color: dodgerblue;
  color: white;
  border-radius: 0.2em;
  border: none;
  box-shadow: 0 0.1em 0.05em rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  user-select: none;
 ...