@media (max-width: 720px) {
  body:not(.is-auth-landing) {
    min-width: 0;
    overflow-x: hidden;
  }

  body:not(.is-auth-landing) .app-header {
    gap: 6px;
    padding: 13px 8px;
  }

  body:not(.is-auth-landing) .header-left {
    gap: 4px;
  }

  body:not(.is-auth-landing) .brand-logo {
    width: 82px;
    margin-right: 4px;
  }

  body:not(.is-auth-landing) #workspaceCrumb,
  body:not(.is-auth-landing) #databaseCrumb,
  body:not(.is-auth-landing) .header-sep,
  body:not(.is-auth-landing) #connectButton,
  body:not(.is-auth-landing) #headerLogs {
    display: none;
  }

  body:not(.is-auth-landing) #tableCrumb {
    max-width: 32vw;
  }

  body:not(.is-auth-landing) .header-right .global-search-shell,
  body:not(.is-auth-landing) .header-right .env-chip {
    display: none;
  }

  body:not(.is-auth-landing) .workspace-name,
  body:not(.is-auth-landing) .project-name,
  body:not(.is-auth-landing) .branch-name {
    max-width: 30vw;
  }

  body:not(.is-auth-landing) #app {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    height: calc(100dvh - var(--app-header-h));
    overflow: hidden;
  }

  body:not(.is-auth-landing) .rail,
  body:not(.is-auth-landing) .rail:hover {
    width: var(--rail-w);
    overflow: hidden;
    box-shadow: none;
  }

  body:not(.is-auth-landing) .rail:hover .nav-label,
  body:not(.is-auth-landing) .rail:focus-within .nav-label {
    opacity: 0;
  }

  body:not(.is-auth-landing) .sidebar,
  body:not(.is-auth-landing) .sidebar-resize-handle {
    display: none;
  }

  body:not(.is-auth-landing) .workspace {
    width: 100%;
    min-width: 0;
    height: calc(100dvh - var(--app-header-h));
  }

  body:not(.is-auth-landing) .tab-strip {
    overflow-x: auto;
    overflow-y: hidden;
  }

  body:not(.is-auth-landing) .tab {
    flex: 0 0 min(210px, 70vw);
  }
}