React full page layout tips

layout.scss

html,
body,
#root {
  width: 100%;
  height: 100%;
}

* {
  &::-webkit-scrollbar {
    width: 12px;
    @apply bg-neutral-700;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-neutral-500;
    border-radius: 18px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}

#layout {
  @apply h-full bg-neutral-900 text-white;
  --app-bar-height: 40px;
  padding-top: var(--app-bar-height);

  #app-bar {
    -webkit-app-region: drag;
    height: var(--app-bar-height);
    @apply fixed left-0 right-0 top-0 flex items-center justify-center;
  }

  main {
    overflow-y: scroll;
    height: 100%;
  }
}