[RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[Shannon Sterz]

this series includes two minor tweaks that should improve the usability and
user experience of some yew components.

dropdowns should now render their pickers below or above the component
depending on the size of the picker and available screen space. a dropup mode
improves usability for filter fields when the picker is rendered above the
dropdown.

the log view in the syslog and task log components was slightly tweaked to avoid
interference between scrollbars and drag handles.

mainly sending this as rfc for now to get feedback on how the dropdown/dropup
is handled here.


pwt-assets:

Shannon Sterz (1):
  dropdown: add class for dropup mode

 scss/_dropdown.scss | 4 ++++
 1 file changed, 4 insertions(+)


pwt:

Shannon Sterz (1):
  dropdown/align: make the picker render above or below a dropdown

 src/dom/align.rs       |  6 +++-
 src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 11 deletions(-)


yew-comp:

Shannon Sterz (1):
  task_viewer/syslog: make padding margin to improve ux

 src/syslog.rs      | 2 +-
 src/task_viewer.rs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)


Summary over all repositories:
  5 files changed, 63 insertions(+), 13 deletions(-)

-- 
Generated by murpp 0.10.0

[PATCH yew-widget-toolkit-assets 1/3] dropdown: add class for dropup mode

[Shannon Sterz]

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

[PATCH yew-widget-toolkit 2/3] dropdown/align: make the picker render above or below a dropdown

[Shannon Sterz]

and detect dropup mode. this allows better ux restricting the height
of the picker to the maximum of the space below or above a `Dropdown`.
by setting the `pwt-dropup` class the picker can also set the proper
flex direction for its content. for example, rendering filter input
fields closer to the `Dropdown` itself, further improving usability.

this implements the fix outlined in [1].

[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>
---
 src/dom/align.rs       |  6 +++-
 src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/dom/align.rs b/src/dom/align.rs
index 603a5b8d..a20cc6ed 100644
--- a/src/dom/align.rs
+++ b/src/dom/align.rs
@@ -456,7 +456,11 @@ where
         style.remove_property("overflow")?;
     }
     let padding = 2.0 * options.viewport_padding;
-    style.set_property("max-height", &format!("calc(100dvh - {padding}px)"))?;
+
+    if style.get_property_value("max-height")? == "" {
+        style.set_property("max-height", &format!("calc(100dvh - {padding}px)"))?;
+    }
+
     style.set_property("max-width", &format!("calc(100dvw - {padding}px)"))?;
 
     if options.align_width {
diff --git a/src/widget/dropdown.rs b/src/widget/dropdown.rs
index 1af09633..64db380a 100644
--- a/src/widget/dropdown.rs
+++ b/src/widget/dropdown.rs
@@ -1,7 +1,11 @@
+use std::cmp;
+
 use html::Scope;
 use wasm_bindgen::JsCast;
 use web_sys::HtmlInputElement;
 
+use crate::dom::IntoHtmlElement;
+
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
 
@@ -155,15 +159,18 @@ impl PwtDropdown {
     }
 
     fn update_picker_placer(&mut self, _props: &Dropdown) {
-        let align_options = _props.align_options.clone().unwrap_or(
-            AlignOptions::new(
-                Point::BottomStart,
-                Point::TopStart,
-                GrowDirection::TopBottom,
-            )
-            .viewport_padding(5.0)
-            .align_width(true),
-        );
+        let align_options =
+            AlignOptions::new(Point::BottomStart, Point::TopStart, GrowDirection::None)
+                .viewport_padding(5.0)
+                .align_width(true)
+                .with_fallback_placement(Point::TopStart, Point::BottomStart, GrowDirection::None)
+                .with_fallback_placement(
+                    Point::BottomStart,
+                    Point::TopStart,
+                    GrowDirection::TopBottom,
+                );
+
+        let align_options = _props.align_options.clone().unwrap_or(align_options);
         self.picker_placer = match AutoFloatingPlacement::new(
             self.dropdown_ref.clone(),
             self.picker_ref.clone(),
@@ -497,7 +504,6 @@ impl Component for PwtDropdown {
     fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
         if first_render {
             let props = ctx.props();
-
             self.update_picker_placer(props);
 
             if props.input_props.autofocus {
@@ -525,6 +531,42 @@ impl Component for PwtDropdown {
             }
         }
 
+        // intentionally fail silently here; if any of these values aren't available here, falling
+        // back to the default logic is fine, this should just provide improved ui/ux.
+        let dropdown_rect = self
+            .dropdown_ref
+            .clone()
+            .into_html_element()
+            .map(|e| e.get_bounding_client_rect());
+
+        let window_height = web_sys::window()
+            .and_then(|w| w.inner_height().ok())
+            .and_then(|h| h.as_f64().map(|h| h as i64));
+
+        if let Some(dropdown_rect) = dropdown_rect
+            && let Some(window_height) = window_height
+        {
+            let top = dropdown_rect.y() as i64;
+            let bottom = window_height - (top + (dropdown_rect.height() as i64));
+            let height = cmp::max(top, bottom) - 5;
+
+            if let Some(picker) = self.picker_ref.clone().into_html_element() {
+                let _ = picker
+                    .style()
+                    .set_property("max-height", &format!("{height}px"))
+                    .ok();
+
+                let height = picker.get_bounding_client_rect().height() as i64;
+                let class_list = picker.class_list();
+
+                if height > bottom && height <= top {
+                    let _ = class_list.add_1("pwt-dropup");
+                } else {
+                    let _ = class_list.remove_1("pwt-dropup");
+                }
+            }
+        }
+
         // update picker placement after we opened/closed to cope with a bug that only seems to
         // affect webkit based browsers like Safari
         if let Some(placer) = &self.picker_placer {
-- 
2.47.3

[PATCH yew-comp 3/3] task_viewer/syslog: make padding margin to improve ux

[Shannon Sterz]

previously, using padding here meant that potential scrolbars would
overlap with the resize handles. by switching to margin the scrolbars
overlap the content of the `LogView` instead. improving usability by
no longer having interference between the scrollbars and the drag
handles.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/syslog.rs      | 2 +-
 src/task_viewer.rs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/syslog.rs b/src/syslog.rs
index 03926d1..d034f80 100644
--- a/src/syslog.rs
+++ b/src/syslog.rs
@@ -173,7 +173,7 @@ impl ProxmoxSyslog {
                 .into()
         } else {
             LogView::new(props.base_url.clone())
-                .padding(2)
+                .margin(2)
                 .class("pwt-flex-fill")
                 .service(props.service.clone())
                 .since(date_time_to_epoch(&self.since, &self.since_time))
diff --git a/src/task_viewer.rs b/src/task_viewer.rs
index e78454e..648d20b 100644
--- a/src/task_viewer.rs
+++ b/src/task_viewer.rs
@@ -290,7 +290,7 @@ impl PwtTaskViewer {
             .with_child(toolbar)
             .with_child(
                 LogView::new(url)
-                    .padding(2)
+                    .margin(2)
                     .class("pwt-flex-fill")
                     .active(active),
             )
-- 
2.47.3

Re: [RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[Dominik Csapak]

On 5/4/26 4:38 PM, Shannon Sterz wrote:
> this series includes two minor tweaks that should improve the usability and
> user experience of some yew components.
> 
> dropdowns should now render their pickers below or above the component
> depending on the size of the picker and available screen space. a dropup mode
> improves usability for filter fields when the picker is rendered above the
> dropdown.
> 
> the log view in the syslog and task log components was slightly tweaked to avoid
> interference between scrollbars and drag handles.

this looks fine to me

> 
> mainly sending this as rfc for now to get feedback on how the dropdown/dropup
> is handled here.
> 

i thought a bit  about this, and since the picker in the dropdown is
relatively generic, i think it's dangerous to simply reverse
the flex direction.

we have no idea what the user of a dropdown renders, and if it's
e.g. simply sorted list of flex items, that order would be reversed
when it would be displayed above?

imho what we could do is to expose the position (if possible) to the
DropdownController, and the picker renderer can react to that change
(by e.g. putting the filter on the bottom manually)

wdyt?

> 
> pwt-assets:
> 
> Shannon Sterz (1):
>    dropdown: add class for dropup mode
> 
>   scss/_dropdown.scss | 4 ++++
>   1 file changed, 4 insertions(+)
> 
> 
> pwt:
> 
> Shannon Sterz (1):
>    dropdown/align: make the picker render above or below a dropdown
> 
>   src/dom/align.rs       |  6 +++-
>   src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
>   2 files changed, 57 insertions(+), 11 deletions(-)
> 
> 
> yew-comp:
> 
> Shannon Sterz (1):
>    task_viewer/syslog: make padding margin to improve ux
> 
>   src/syslog.rs      | 2 +-
>   src/task_viewer.rs | 2 +-
>   2 files changed, 2 insertions(+), 2 deletions(-)
> 
> 
> Summary over all repositories:
>    5 files changed, 63 insertions(+), 13 deletions(-)
> 

Re: [RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[Shannon Sterz]

On Wed May 6, 2026 at 9:53 AM CEST, Dominik Csapak wrote:
>
>
> On 5/4/26 4:38 PM, Shannon Sterz wrote:
>> this series includes two minor tweaks that should improve the usability and
>> user experience of some yew components.
>>
>> dropdowns should now render their pickers below or above the component
>> depending on the size of the picker and available screen space. a dropup mode
>> improves usability for filter fields when the picker is rendered above the
>> dropdown.
>>
>> the log view in the syslog and task log components was slightly tweaked to avoid
>> interference between scrollbars and drag handles.
>
> this looks fine to me
>
>>
>> mainly sending this as rfc for now to get feedback on how the dropdown/dropup
>> is handled here.
>>
>
> i thought a bit  about this, and since the picker in the dropdown is
> relatively generic, i think it's dangerous to simply reverse
> the flex direction.
>
> we have no idea what the user of a dropdown renders, and if it's
> e.g. simply sorted list of flex items, that order would be reversed
> when it would be displayed above?
>
> imho what we could do is to expose the position (if possible) to the
> DropdownController, and the picker renderer can react to that change
> (by e.g. putting the filter on the bottom manually)
>
> wdyt?

yep sounds good. i'd keep using a reverse column instead of changing the
markup itself tho. for two reasons:

- it makes more semantic sense to me for the filter input field to still
  be the first one in the picker (this also mean the tab order is
  "correct").
- scrolling behavior is better, browsers will scroll the picker to its
  bottom by default.

we could correct these manually too ofc, but i don't really see the
upside here. i will drop the first patch of this series and implement
this behavior in the `GridPicker` component, though.

>> pwt-assets:
>>
>> Shannon Sterz (1):
>>    dropdown: add class for dropup mode
>>
>>   scss/_dropdown.scss | 4 ++++
>>   1 file changed, 4 insertions(+)
>>
>>
>> pwt:
>>
>> Shannon Sterz (1):
>>    dropdown/align: make the picker render above or below a dropdown
>>
>>   src/dom/align.rs       |  6 +++-
>>   src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
>>   2 files changed, 57 insertions(+), 11 deletions(-)
>>
>>
>> yew-comp:
>>
>> Shannon Sterz (1):
>>    task_viewer/syslog: make padding margin to improve ux
>>
>>   src/syslog.rs      | 2 +-
>>   src/task_viewer.rs | 2 +-
>>   2 files changed, 2 insertions(+), 2 deletions(-)
>>
>>
>> Summary over all repositories:
>>    5 files changed, 63 insertions(+), 13 deletions(-)
>>

Re: [RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[Dominik Csapak]

On 5/6/26 11:41 AM, Shannon Sterz wrote:
> On Wed May 6, 2026 at 9:53 AM CEST, Dominik Csapak wrote:
>>
>>
>> On 5/4/26 4:38 PM, Shannon Sterz wrote:
>>> this series includes two minor tweaks that should improve the usability and
>>> user experience of some yew components.
>>>
>>> dropdowns should now render their pickers below or above the component
>>> depending on the size of the picker and available screen space. a dropup mode
>>> improves usability for filter fields when the picker is rendered above the
>>> dropdown.
>>>
>>> the log view in the syslog and task log components was slightly tweaked to avoid
>>> interference between scrollbars and drag handles.
>>
>> this looks fine to me
>>
>>>
>>> mainly sending this as rfc for now to get feedback on how the dropdown/dropup
>>> is handled here.
>>>
>>
>> i thought a bit  about this, and since the picker in the dropdown is
>> relatively generic, i think it's dangerous to simply reverse
>> the flex direction.
>>
>> we have no idea what the user of a dropdown renders, and if it's
>> e.g. simply sorted list of flex items, that order would be reversed
>> when it would be displayed above?
>>
>> imho what we could do is to expose the position (if possible) to the
>> DropdownController, and the picker renderer can react to that change
>> (by e.g. putting the filter on the bottom manually)
>>
>> wdyt?
> 
> yep sounds good. i'd keep using a reverse column instead of changing the
> markup itself tho. for two reasons:
> 
> - it makes more semantic sense to me for the filter input field to still
>    be the first one in the picker (this also mean the tab order is
>    "correct").
> - scrolling behavior is better, browsers will scroll the picker to its
>    bottom by default.
> 
> we could correct these manually too ofc, but i don't really see the
> upside here. i will drop the first patch of this series and implement
> this behavior in the `GridPicker` component, though.
> 

yes, how the picker decides what to render first is not really
important, so if we can reverse the flex order there it's fine

i'd only want to avoid that we reverse the flex order when we don't have
any information or control over what is actually rendered

>>> pwt-assets:
>>>
>>> Shannon Sterz (1):
>>>     dropdown: add class for dropup mode
>>>
>>>    scss/_dropdown.scss | 4 ++++
>>>    1 file changed, 4 insertions(+)
>>>
>>>
>>> pwt:
>>>
>>> Shannon Sterz (1):
>>>     dropdown/align: make the picker render above or below a dropdown
>>>
>>>    src/dom/align.rs       |  6 +++-
>>>    src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
>>>    2 files changed, 57 insertions(+), 11 deletions(-)
>>>
>>>
>>> yew-comp:
>>>
>>> Shannon Sterz (1):
>>>     task_viewer/syslog: make padding margin to improve ux
>>>
>>>    src/syslog.rs      | 2 +-
>>>    src/task_viewer.rs | 2 +-
>>>    2 files changed, 2 insertions(+), 2 deletions(-)
>>>
>>>
>>> Summary over all repositories:
>>>     5 files changed, 63 insertions(+), 13 deletions(-)
>>>
> 

Superseded: Re: [RFC yew-comp/yew-widget-toolkit/yew-widget-toolkit-assets 0/3] minor ui/ux tweaks for pwt and yew-comp

[Shannon Sterz]

Superseded-by: https://lore.proxmox.com/yew-devel/20260506095525.114495-1-s.sterz@proxmox.com/

On Mon May 4, 2026 at 4:39 PM CEST, Shannon Sterz wrote:
> this series includes two minor tweaks that should improve the usability and
> user experience of some yew components.
>
> dropdowns should now render their pickers below or above the component
> depending on the size of the picker and available screen space. a dropup mode
> improves usability for filter fields when the picker is rendered above the
> dropdown.
>
> the log view in the syslog and task log components was slightly tweaked to avoid
> interference between scrollbars and drag handles.
>
> mainly sending this as rfc for now to get feedback on how the dropdown/dropup
> is handled here.
>
>
> pwt-assets:
>
> Shannon Sterz (1):
>   dropdown: add class for dropup mode
>
>  scss/_dropdown.scss | 4 ++++
>  1 file changed, 4 insertions(+)
>
>
> pwt:
>
> Shannon Sterz (1):
>   dropdown/align: make the picker render above or below a dropdown
>
>  src/dom/align.rs       |  6 +++-
>  src/widget/dropdown.rs | 62 +++++++++++++++++++++++++++++++++++-------
>  2 files changed, 57 insertions(+), 11 deletions(-)
>
>
> yew-comp:
>
> Shannon Sterz (1):
>   task_viewer/syslog: make padding margin to improve ux
>
>  src/syslog.rs      | 2 +-
>  src/task_viewer.rs | 2 +-
>  2 files changed, 2 insertions(+), 2 deletions(-)
>
>
> Summary over all repositories:
>   5 files changed, 63 insertions(+), 13 deletions(-)