Merge pull request #230 from DeepLcom/revert-224-revert-219-mobile-breakpoint

Revert "Revert "Fix experience between 880-1024 px widths""

Author: daniel-jones-dev

tablet-width.css

@@ -0,0 +1,80 @@
+/* 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;
+  }
+}