@media (max-width: 1100px) {
  .topbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .topbar-brand,
  .topbar-actions {
    margin-left: 0;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
  }

  .sidebar-content {
    overflow: visible;
  }

  .sidebar-tab-panels {
    overflow: visible;
  }

  .viewer-panel {
    flex: 1 1 auto;
    /* .viewer-panel has overflow:hidden, which per the flexbox spec makes its
       automatic min-height resolve to 0 rather than its content's natural
       minimum. Without an explicit floor here, the non-shrinking stacked
       sidebar above it would squeeze it down to nothing. */
    min-height: 320px;
  }

  .image-frame {
    min-height: 320px;
  }
}

@media (max-width: 440px) {
  .container {
    padding: 16px 16px 20px;
  }
}