From: Shannon Sterz <s.sterz@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [PATCH yew-widget-toolkit-assets 1/3] dropdown: add class for dropup mode
Date: Mon, 4 May 2026 16:39:09 +0200 [thread overview]
Message-ID: <20260504143911.288747-2-s.sterz@proxmox.com> (raw)
In-Reply-To: <20260504143911.288747-1-s.sterz@proxmox.com>
a dropup is a dropdown that is rendered above the corresponding input
element. in such scenarios reversing the column flex direction is
desirable for better ux. for example, if a `Combobox` specifies a
filter, this would now render the filter box closer to the dropdown's
input element instead of on top of the dropdown list.
this is part of the fix outlined in [1] and makes dropdowns more
adaptive respective to how they can be rendered. the `!important` is
needed to override `.pwt-flex-direction-column` as it also uses
`!important` already.
[1]:
https://git.proxmox.com/?p=proxmox-datacenter-manager.git;a=commit;f=ui/css/desktop-yew-style.scss;h=dafa21a3
Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
Notes:
this came up in peat which now also has a couple of really long
comboboxes. affecting ux detrimentally. so move the stop-gap here to
at least have a consistent experience.
scss/_dropdown.scss | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 671b872..ca113e2 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -15,3 +15,7 @@
.pwt-dropdown[data-show] {
display: flex;
}
+
+.pwt-dropup > .pwt-flex-direction-column {
+ flex-direction: column-reverse !important;
+}
--
2.47.3
next prev parent reply other threads:[~2026-05-04 14:39 UTC|newest]
Thread overview: 4+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-05-04 14:39 [RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp Shannon Sterz
2026-05-04 14:39 ` Shannon Sterz [this message]
2026-05-04 14:39 ` [PATCH yew-widget-toolkit 2/3] dropdown/align: make the picker render above or below a dropdown Shannon Sterz
2026-05-04 14:39 ` [PATCH yew-comp 3/3] task_viewer/syslog: make padding margin to improve ux Shannon Sterz
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260504143911.288747-2-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=yew-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox