Ironbar widgets do not adjust to changes in output

[ForgotMyPasswd]

Describe the bug When my monitor orientation changes, in my case by using iio-hyprland to automatically rotate my screen when I rotate my laptop, ironbar also updates its size. However, widgets appear offscreen when I click on them so they are only accessible when my display is in landscape mode.

To Reproduce Steps to reproduce the behavior:

1. Open ironbar
2. Rotate display orientation in a compositor
3. Click on a widget
4. See error

Expected behavior Widgets such as the calendar widget to appear below the button when clicked or tapped

System information:

• Distro: EndeavourOS
  • Compositor: Hyprland 0.40.0
• Ironbar version: Latest git

Configuration

Share your bar configuration and stylesheet as applicable:

Config

``` anchor_to_edges: true position: top icon_theme: Papirus-Dark height: 24 start: - type: workspaces all_monitors: false name_map: '1': "" '2': "󰈹" '3': "" '4': "" '5': "" '6': "" - type: label label: "" class: pl-arrow-left1 end: - type: label label: "" class: pl-arrow-right5 - type: tray direction: right_to_left # icon_size: 25 - type: clipboard icon: 󰅍 max_items: 10 truncate: mode: end length: 50 - type: label label: "" class: pl-arrow-right4 - type: "upower" format: "{percentage}%" name: upower-btn - type: label label: "" class: pl-arrow-right3 - type: clock - type: label label: "" class: pl-arrow-right2 - type: custom bar: - type: button name: window-actions-btn on_click: '!hyprctl dispatch layoutmsg orientationcycle' widgets: - type: image src: icon:view-dual-symbolic size: 24 name: window-actions-btn-image - type: label label: "" class: pl-arrow-right1 - type: notifications show_count: true icons: closed_none: 󰍥 closed_some: 󱥂 closed_dnd: 󱅯 open_none: 󰍡 open_some: 󱥁 open_dnd: 󱅮 ```

Styles

```css @define-color color_bg #11111b; @define-color color_bg_alt #181825; @define-color color_bg_hover #f5c2e7; @define-color color_border #181825; @define-color color_border_active #cba6f7; @define-color color_text #cdd6f4; @define-color color_urgent #f38ba8; @define-color shade1 #311B92; @define-color shade2 #4527A0; @define-color shade3 #512DA8; @define-color shade4 #5E35B1; @define-color shade5 #673AB7; @define-color shade6 #7E57C2; @define-color shade7 #9575CD; @define-color shade8 #B39DDB; /* -- base styles -- */ * { font-family: Noto Sans Nerd Font, sans-serif; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { box-shadow: inset 0 -3px; color: @color_text; } scale trough { min-width: 1px; min-height: 2px; } #bar { border-top: 0px solid @color_border; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { background-color: @shade5; margin-left: 0px; font-size: 1.1em; } .clipboard .btn .icon:hover { background-color: @color_bg_hover; color: @color_text; } .clipboard .btn .text-icon { background-color: @shade5; } .popup-clipboard { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item { padding-bottom: 0.3em; background-color: @color_bg_alt; border-bottom: 1px solid @color_border; } .popup-clipboard .item .btn-remove { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item .btn-remove:hover { background-color: @color_bg_hover; color: @color_text; } /* -- clock -- */ .clock { background-color: @shade3; font-weight: bold; } .popup-clock { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 4px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_alt; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .text-button{ background-color: @shade1; } .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { background-color: @shade5; margin-left: 0px; } /* -- upower -- */ /* Attempting to theme the icon + label backgrounds*/ .upower { background-color: @shade4; color: @shade4; } .upower .contents{ background-color: @shade4; color: @shade4; } .popup-upower { background-color: @color_bg_alt; color: @color_text; } /* -- volume -- */ .popup-volume .device-box { border-right: 1px solid @color_border; } /* -- workspaces -- */ .workspaces .item { background-color: @shade1; } .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @shade1; color: @color_border_active; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: powerlines -- */ .pl-arrow-left1 { background-color: @color_bg; color: @shade1; font-size: 33px; margin: 0px; } .pl-arrow-right1 { background-color: @shade2; color: @shade1; font-size: 33px; margin: 0px; } .pl-arrow-right2 { background-color: @shade3; color: @shade2; font-size: 33px; margin: 0px; } .pl-arrow-right3 { background-color: @shade4; color: @shade3; font-size: 33px; margin: 0px; } .pl-arrow-right4 { background-color: @shade5; color: @shade4; font-size: 33px; margin: 0px; } .pl-arrow-right5 { color: @shade5; font-size: 33px; margin: 0px; } /* -- Virtual Keyboard --*/ .toggle-virtual-keyboard #toggle-virtual-keyboard-btn { background-color: @shade2; } .toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image { background-color: @shade2; } /* -- Window Layout Management -- */ #window-actions-btn { background-color: @shade2; color: @shade2; } #window-actions-btn-image{ background-color: @shade2; color: @shade2; } .popup-window-action-menu #header { color: @color_text; font-size: 1.2em; border-bottom: 1px solid @color_text; padding-bottom: 0.4em; margin-bottom: 0.8em; } ```

Additional context This used to work on a previous version of ironbar, can't remember which git revision sadly. Here are the logs produced. ironbar.2024-05-25.log

[JakeStanger]

I can't easily test this myself. Are you able to send a screenshot of the problem please?

[ForgotMyPasswd]

I've attached a video which showcases the problem

https://github.com/JakeStanger/ironbar/assets/96489361/c5ab266b-5c8c-4331-af3b-63d92982a4af

[JakeStanger]

That's brilliant, thanks.

Very cool to see Ironbar on a touchscreen too.