From 795a1ac88146373a6a1e4a7ab594f5d82568c792 Mon Sep 17 00:00:00 2001 From: Ben Morss Date: Tue, 23 Dec 2025 17:09:45 -0500 Subject: [PATCH 1/5] Fix experience between 880-1024 px widths Tweak Mintlify CSS so that we don't simply show the quite inferior mobile view when someone shrinks their desktop browser window to <1024px width. Instead, continue to show the sidebar, the search bar, and most other elements until the window really gets too small. --- styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6971ec2 --- /dev/null +++ b/styles.css @@ -0,0 +1,59 @@ +/* These rules allow us to retain the desktop view until 880px. We could go all + * the way to the traditional 768px breakpoint, but our left sidebar is rather wide. + * + * 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 plan `hidden` class on the element to be shown at + * mobile resolution. + * Unfortunately in some cases we do need to specify more specific classes. + */ + +@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 */ + #content-area { + padding-left: 21.5rem; + } + +/* Don't introduce new left margin in main section */ + #content-area { + margin-left: -3rem; + } + +/* Keep left sidebar font at 14px */ + #sidebar-content { + font-size: .875em; + } + + /* Retain full searchbar */ + #navbar .h-full .hidden.flex-1.justify-center { + display: block; + } + + #navbar .h-full .lg\:hidden { + display: none; + } + +/* Retain tabs */ + #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; + width: 18rem; + } +} \ No newline at end of file From c3feadf3faa88761d047bb84a56b33064ba05c47 Mon Sep 17 00:00:00 2001 From: Ben Morss Date: Wed, 31 Dec 2025 14:55:37 -0700 Subject: [PATCH 2/5] Change #sidebar width instead of #content area, plus cosmetic fixes --- styles.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index 6971ec2..0974f43 100644 --- a/styles.css +++ b/styles.css @@ -3,9 +3,11 @@ * * 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 plan `hidden` class on the element to be shown at + * resolutions, and a just plain `hidden` class on the element to be shown at * mobile resolution. - * Unfortunately in some cases we do need to specify more specific classes. + * + * 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) { @@ -15,13 +17,12 @@ width: 16rem; } -/* Retain left padding in main section so it doesn't overlap with the sidebar */ - #content-area { - padding-left: 21.5rem; - } +/* Retain left padding in main section so it doesn't overlap with the sidebar. + * Don't introduce new left margin in main section. + */ -/* Don't introduce new left margin in main section */ #content-area { + padding-left: 21.5rem; margin-left: -3rem; } @@ -54,6 +55,9 @@ /* Use Mintlify's default styles at this width */ #content-area { padding-left: 23.7rem; + } + + #sidebar { width: 18rem; } } \ No newline at end of file From 8aeb301585b0c74fef29cddb3eea41d14c73bd23 Mon Sep 17 00:00:00 2001 From: Ben Morss Date: Wed, 31 Dec 2025 15:51:25 -0700 Subject: [PATCH 3/5] Change CSS filename, improve main comment --- styles.css => tablet-width.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) rename styles.css => tablet-width.css (84%) diff --git a/styles.css b/tablet-width.css similarity index 84% rename from styles.css rename to tablet-width.css index 0974f43..19b4227 100644 --- a/styles.css +++ b/tablet-width.css @@ -1,5 +1,6 @@ -/* These rules allow us to retain the desktop view until 880px. We could go all - * the way to the traditional 768px breakpoint, but our left sidebar is rather wide. +/* 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 widh 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 From a44e19d0ab94c2bd89d2574231951de13f8456a6 Mon Sep 17 00:00:00 2001 From: Ben Morss Date: Mon, 5 Jan 2026 19:23:05 -0500 Subject: [PATCH 4/5] Hide just mobile search control without hiding three-dot menu --- tablet-width.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tablet-width.css b/tablet-width.css index 19b4227..3a42559 100644 --- a/tablet-width.css +++ b/tablet-width.css @@ -21,7 +21,6 @@ /* 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; @@ -32,12 +31,13 @@ font-size: .875em; } - /* Retain full searchbar */ +/* Retain full searchbar */ #navbar .h-full .hidden.flex-1.justify-center { display: block; } - #navbar .h-full .lg\:hidden { +/* Hide little search control */ + #search-bar-entry-mobile { display: none; } From b15e9986a5d9de1b571f0e9c35378476b938ef6a Mon Sep 17 00:00:00 2001 From: Ben Morss Date: Mon, 5 Jan 2026 19:40:19 -0500 Subject: [PATCH 5/5] Safer selectors with id's and :has(), plus fallbacks for nonmajor browsers --- tablet-width.css | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/tablet-width.css b/tablet-width.css index 3a42559..5df2a7b 100644 --- a/tablet-width.css +++ b/tablet-width.css @@ -1,6 +1,6 @@ /* 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 widh of our current left sidebar makes that undesirable. + * 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 @@ -32,8 +32,16 @@ } /* Retain full searchbar */ - #navbar .h-full .hidden.flex-1.justify-center { - display: block; + @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 */ @@ -42,8 +50,16 @@ } /* Retain tabs */ - #navbar .hidden.px-12.h-12 { - display: block; + @supports selector(:has()) { + div:has(> .nav-tabs) { + display: block; + } + } + + @supports not selector(:has()) { + #navbar .hidden.px-12.h-12 { + display: block; + } } /* Hide mobile menu */