all lists on lists.proxmox.com
 help / color / mirror / Atom feed
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





  reply	other threads:[~2026-05-04 14:39 UTC|newest]

Thread overview: 8+ 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
2026-05-06  7:53 ` [RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp Dominik Csapak
2026-05-06  9:43   ` Shannon Sterz
2026-05-06  9:55     ` Dominik Csapak
2026-05-06  9:56 ` Superseded: " 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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal