This repository has been archived on 2023-03-18. You can view files and clone it, but cannot push or open issues or pull requests.

Joe e0c663c20d UX: Improves select-kit body placement when vertical space is short (#16504) ... 1. When the select-kit body is rendered, it defaults to being displayed under the triggering select-kit header, unless... there isn't enough space between the bottom of the select-kit header and the bottom of the viewport & there's enough space on top of the select-kit header, and in that case, we render it on top. 2. We give it a bit of padding on top, so it never renders below the header on the Z-axis. 14778ba52e/app/assets/javascripts/select-kit/addon/components/select-kit.js (L877-L884) 3. If there isn't enough space between the bottom of the viewport and the bottom of the select-kit header, and there isn't enough space between its top and the bottom of `d-header`, it renders at the bottom of the select-kit header. In theory, number 3 above rarely ever happens. However, it can occur in the case of the user preferences page in combination with a large select-kit body (many categories). The select-kit body then renders below the trigging select-kit header, but it's cut off. Users won't be able to see the entire select-kit body. Here's an example a719734d92.mp4 This PR adds a "prevent overflow" modifier to Popper. What it does is that it handles the case above. If there's not enough space below the select-kit header or above it, render the select-kit body below the select-kit header BUT... anchor it to the bottom of the viewport. Here's what that looks like 32cd1639bb.mp4 After this fix, even very large select-kit bodies will always be on the screen. Please note that this PR has no impact on either number 1 or number 2 above, and those will continue to function as they currently do. The only downside here is that the select-kit body might cover the select-kit header if it needs to be anchored at the bottom of the viewport, and it's very large. However, between that and not being able to see all the options, I think it's a fair compromise. There's only so much space in the viewport. This PR ignores mobile because we have a different placement strategy. We use `position: absolute`... so, users can scroll the viewport if needed.		2022-04-19 21:13:54 +08:00
..
components	UX: Improves select-kit body placement when vertical space is short (#16504)	2022-04-19 21:13:54 +08:00
lib	FIX: allows to use icon-picker in wizard (#13786)	2021-07-21 13:49:21 +02:00
mixins	UX: Minor layout tweaks to dropdowns (#14299)	2021-09-10 09:00:41 -04:00
templates/components	FIX: Use the category's text-only description in the category-chooser (#15735)	2022-02-24 12:14:24 -03:00
.gitkeep	Revert "Revert "Merge branch 'master' of https://github.com/discourse/discourse""	2020-05-23 00:56:13 -04:00