html, body, #root { height: 100%; overscroll-behavior: none; user-select: none; } *::selection { color: #fff; background: hsla(229, 71%, 57%, 1); } #app { height: 100%; display: grid; grid-template-columns: 352px 1fr auto; } #main { position: relative; display: grid; grid-template-rows: 96px 1fr 100px; /* 56px 1fr 100px without pinned messages */ height: 100vh; } /* #main, #sidebar, #members, #main > div { border: 1px solid rgba(0, 0, 0, 0.1); } */ .composer-input::placeholder { transition: color 0.2s ease-in-out; } #sidebar { overflow: auto; height: 100vh; } #content { position: relative; overflow: auto; padding: 40px 0px 0px 0px; height: 100vh; margin-top: -96px; /* -56px without pinned messages */ } #messages { padding: 32px 8px; } #anchor-actions { position: absolute; right: 20px; transform: translateY(calc(-100% - 12px)); } #composer { position: sticky; bottom: 0; left: 0; z-index: 100; } #members { width: 352px; overflow: auto; } @media screen and (max-width: 768px) { #app { grid-template-columns: 1fr; } #sidebar { display: none; } }