Commit b07c4253 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Remove local `tall` media query (screen) and consolidate filter height

The `tall` `screen` value in this project's config conflicts with the
`tall` value in the `frontend-shared` Tailwind preset. This project's
`tall` was only being used in one place, and it turns out the styling
needs there can be more cleanly accomplished without media queries.

Use `min()` to set a constrained max-height on filter-select lists.
parent 3fedfbb8
......@@ -47,9 +47,11 @@ function FilterSelect({
label={menuLabel}
title={title}
contentClass={classnames(
// Don't let filter list get too terribly tall. On shorter screens,
// restrict to 70vh; set a static max-height for taller screens.
'max-h-[70vh] tall:max-h-[504px] overflow-y-auto'
// Don't let filter list get too terribly tall. Where space allows,
// use `504px` (this odd number is to maximize the likelihood that the
// overflow cutoff is in the middle of an option, making it more obvious
// that the list is scrollable), but don't exceed 60vh.
'max-h-[min(60vh,504px)] overflow-y-auto'
)}
>
{filterOptions.map(filterOption => (
......
......@@ -195,7 +195,6 @@ export default {
'annotator-md': '480px',
// Tablet and up
'annotator-lg': '600px',
tall: { raw: '(min-height: 700px)' },
},
spacing: {
// These are selective, pixel-specific variants of Tailwind's default
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment