tablet-width.css

/* These rules allow us to retain most elements of the desktop view between 880px and 1024px.
 * We could extend these all the way to the traditional 768px breakpoint,
 * but the width of our current left sidebar makes that undesirable.
 *
 * Mintlify provides an id for most of the areas we want to fix up.
 * For the rest, they use a `lg:hidden` class on the element to be shown at desktop
 * resolutions, and a just plain `hidden` class on the element to be shown at
 * mobile resolution.
 *
 * Unfortunately in some cases we do need to select elements by using a few of classes.
 * Ideally we'd have id's for these too.
 */

@media (min-width: 880px) {
/* Retain the left sidebar, but make it a little narrower */
  #sidebar {
    display: block;
    width: 16rem;
  }

/* Retain left padding in main section so it doesn't overlap with the sidebar.
 * Don't introduce new left margin in main section.
 */
  #content-area {
    padding-left: 21.5rem;
    margin-left: -3rem;
  }

/* Keep left sidebar font at 14px */
  #sidebar-content {
    font-size: .875em;
  }

/* Retain full searchbar */
  @supports selector(:has()) {
    div:has(> #search-bar-entry) {
      display: block;
    }
  }

  @supports not selector(:has()) {
    #navbar .h-full .hidden.flex-1.justify-center {
      display: block;
    }
  }

/* Hide little search control */
  #search-bar-entry-mobile {
    display: none;
  }

/* Retain tabs */
  @supports selector(:has()) {
    div:has(> .nav-tabs) {
      display: block;
    }
  }

  @supports not selector(:has()) {
    #navbar .hidden.px-12.h-12 {
      display: block;
    }
  }

/* Hide mobile menu */
  #navbar button.lg\:hidden {
    display: none;
  }
}

@media (min-width: 1024px) {
/* Use Mintlify's default styles at this width */
  #content-area {
    padding-left: 23.7rem;
  }

  #sidebar {
    width: 18rem;
  }
}