Skip to content

Fix experience between 880-1024 px widths #219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
morsssss wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix experience between 880-1024 px widths #219

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
795a1ac
Fix experience between 880-1024 px widths
morsssss Dec 23, 2025
c3feadf
Change #sidebar width instead of #content area, plus cosmetic fixes
morsssss Dec 31, 2025
8aeb301
Change CSS filename, improve main comment
morsssss Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions tablet-width.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/* 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
* 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 */
Copy link

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The selector relies on multiple generic class names that are likely to change. Class-based selectors like ".hidden.flex-1.justify-center" are fragile and prone to breaking if Mintlify updates their markup. Consider adding a comment warning about the brittleness of this selector or exploring more stable alternatives if available.

Suggested change
/* Retain full searchbar */
/* Retain full searchbar */
/* NOTE: This selector is brittle because it relies on Mintlify's current utility
* class structure (.hidden.flex-1.justify-center). If Mintlify changes these
* classes or the DOM hierarchy, this override may stop working and should be
* revisited.
*/

Copilot uses AI. Check for mistakes.
Copy link
Member

@leoncheng57 leoncheng57 Dec 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Larger screen width:
Image

Medium screen width (current changes):
Image

Where did the other buttons in this section go?

Copy link
Contributor Author

@morsssss morsssss Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the current site, at window widths between 768 px and 1024 px, the search bar changes to a button, and the other elements all vanish (see above). I restored the full search bar, but not the other controls, because I figured that most often wouldn't fit.

We could add CSS to bring certain top nav elements back at certain widths, but as you know, that's not a common approach, and I figured this was fragile enough already - as few top nav elements have id's. The exception is the #topbar-cta-button , which I'd be happy to restore when it could fit if you think that's a good idea.

Copy link
Member

@leoncheng57 leoncheng57 Dec 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the current side in small width, the other elements do not vanish. They turn into an ellpsis button. Even at medium width, there should be an ellpsis button.

Image

#navbar .h-full .hidden.flex-1.justify-center {
Copy link
Member

@leoncheng57 leoncheng57 Dec 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"flex-1" is not a very maintainable selector to use. Are there any more general selectors that could work?

Copy link
Contributor Author

@morsssss morsssss Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sadly, this is the best I could do, as Mintlify didn't provide an id here or anything else even vaguely semantic. Other suggestions appreciated!

Copy link
Contributor Author

@morsssss morsssss Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sadly, this is the best I could do, as Mintlify didn't provide an id here or anything else even vaguely semantic. Other suggestions appreciated!

Copy link
Member

@leoncheng57 leoncheng57 Dec 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This level of code maintainability is not something I would personally approve. But I will also not fight against approval since the potential negatives are low.

One request at least: Please rename this 'styles.css' file to be 'medium-width-compatibility.css' or similar. So that future css overrides can be organized separately from this CSS code.

Copy link
Contributor Author

@morsssss morsssss Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like the maintainability issue with these two rules either - so I'd also be happy to drop this part of the PR. However, I do agree that the positives (our site having more easily discoverable functionality in more cases) outweigh the negatives (these improvements might someday spontaneously revert). I can also follow this up with a request to the Mintlify team to give these elements id's.

Excellent point about the filename! I'll change that.

display: block;
}

#navbar .h-full .lg\:hidden {
display: none;
}

/* Retain tabs */
Copy link

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The selector relies on generic class names that are likely to change. Similar to the searchbar selector above, ".hidden.px-12.h-12" is fragile and may break with Mintlify updates. Consider documenting this brittleness or using more stable alternatives if available.

Suggested change
/* Retain tabs */
/* Retain tabs.
* NOTE: This selector intentionally relies on Mintlify's current utility classes
* (.hidden.px-12.h-12) and may break if Mintlify changes its markup or class names.
* If Mintlify provides a more stable hook (e.g., an id or data-attribute) for the
* tabs container in the future, this rule should be updated to use that instead.
*/

Copilot uses AI. Check for mistakes.
Copy link
Member

@leoncheng57 leoncheng57 Dec 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"px-12.h-12" are also too fragile. Are there other selectors?

Copy link
Contributor Author

@morsssss morsssss Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sadly, this is the other case where we don't have a unique, nonfragile selector. My only other idea was to see if we could work down from a more specifically selected parent, but to me that seems worse.

So, the two most fragile selectors here make the searchbar and tabs visible at this intermediate width. I believe the worst-case scenario here is that those will remain invisible, as they are now.

#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;
}
}