[Bug]: Groups hover does not work properly if some margin is given.

[niksingh710]

I have linked my Configuration and also putting snippets for a testing purpose.

{
  "layer": "top",
  "position": "right",
  "margin": "5 2 5 0",
  "reload_style_on_change": true,
  "modules-left": [
    "custom/updates",
    "hyprland/workspaces",
    "hyprland/submap",
    "group/info"
  ],
  "hyprland/workspaces": {
    "format": "{icon}",
    "on-click": "activate",
    "all-outputs": true,
    // "format-icons": {
    //   "1": "一",
    //   "2": "二",
    //   "3": "三",
    //   "4": "四",
    //   "5": "五",
    //   "6": "六",
    //   "7": "七",
    //   "8": "八",
    //   "9": "九",
    //   "10": "十"
    // }
    "format-icons": {
      "1": "१",
      "2": "२",
      "3": "३",
      "4": "४",
      "5": "५",
      "6": "६",
      "7": "७",
      "8": "८",
      "9": "९",
      "10": "०"
      // "10": "१०"
    }
  },
  "hyprland/submap": {
    "format": "<b>󰇘</b>",
    "max-length": 8,
    "tooltip": true
  },
  "group/info": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": false
    },
    "modules": [
      "custom/dmark",
      "group/gcpu",
      "memory",
      "disk"
    ]
  },
  "custom/dmark": {
    "format": "",
    "tooltip": false
  },
  "group/gcpu": {
    "orientation": "inherit",
    "modules": [
      "custom/cpu-icon",
      "custom/cputemp",
      "cpu"
    ]
  },
  "custom/cpu-icon": {
    "format": "󰻠",
    "tooltip": false
  },
  "custom/cputemp": {
    "format": "{}",
    "exec": "~/.config/waybar/bin/cputemp",
    "interval": 10,
    "return-type": "json"
  },
  "cpu": {
    "format": "<b>{usage}󱉸</b>",
    "on-click": "foot btop"
  },
  "memory": {
    "format": "<b>  \n{:2}󱉸</b>"
  },
  "disk": {
    "interval": 600,
    "format": "<b> 󰋊 \n{percentage_used}󱉸</b>",
    "path": "/"
  },
  "modules-right": [
    "custom/recorder",
    "privacy",
    "group/brightness",
    "group/sound",
    "group/connection",
    "group/together",
    "group/cnoti",
    "tray",
    "group/power"
  ],
  "custom/recorder": {
    "format": "{}",
    "interval": "once",
    "exec": "echo ''",
    "tooltip": "false",
    "exec-if": "pgrep 'wl-screenrec'",
    "on-click": "recorder",
    "signal": 4
  },
  "privacy": {
    "orientation": "vertical",
    "icon-spacing": 4,
    "icon-size": 14,
    "transition-duration": 250,
    "modules": [
      {
        "type": "screenshare",
        "tooltip": true,
        "tooltip-icon-size": 24
      }
    ]
  },
  "group/brightness": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": false
    },
    "modules": [
      "backlight",
      "backlight/slider"
    ]
  },
  "backlight": {
    "device": "intel_backlight",
    "format": "{icon}",
    "format-icons": [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ],
    "on-scroll-down": "brightnessctl s 5%-",
    "on-scroll-up": "brightnessctl s +5%",
    "tooltip": true,
    "tooltip-format": "Brightness: {percent}% ",
    "smooth-scrolling-threshold": 1
  },
  "backlight/slider": {
    "min": 5,
    "max": 100,
    "orientation": "vertical",
    "device": "intel_backlight"
  },
  "group/sound": {
    "orientation": "inherit",
    "modules": [
      "group/audio",
      "custom/notifications"
    ]
  },
  "group/audio": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": false
    },
    "modules": [
      "pulseaudio",
      "pulseaudio#mic",
      "pulseaudio/slider"
    ]
  },
  "group/cnoti": {
    "orientation": "inherit",
    "modules": [
      "custom/github"
    ]
  },
  "group/connection": {
    "orientation": "inherit",
    "modules": [
      "custom/vpn",
      "custom/hotspot",
      "group/network",
      "group/bluetooth"
    ]
  },
  "group/together": {
    "orientation": "inherit",
    "modules": [
      "group/utils",
      "clock"
    ]
  },
  "group/utils": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": true
    },
    "modules": [
      "custom/mark",
      "custom/weather",
      "custom/colorpicker",
      "custom/hyprshade",
      "idle_inhibitor",
      "custom/hyprkill"
    ]
  },
  "group/network": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": true
    },
    "modules": [
      "network",
      "network#speed"
    ]
  },
  "group/bluetooth": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": true
    },
    "modules": [
      "bluetooth",
      "bluetooth#status"
    ]
  },
  "group/power": {
    "orientation": "inherit",
    "drawer": {
      "transition-duration": 500,
      "transition-left-to-right": false
    },
    "modules": [
      "battery",
      "power-profiles-daemon"
    ]
  },
  "tray": {
    "icon-size": 18,
    "spacing": 10
  },
  "pulseaudio": {
    "format": "{icon}",
    "format-bluetooth": "{icon}",
    "tooltip-format": "{volume}% {icon} | {desc}",
    "format-muted": "󰖁",
    "format-icons": {
      "headphones": "󰋌",
      "handsfree": "󰋌",
      "headset": "󰋌",
      "phone": "",
      "portable": "",
      "car": " ",
      "default": [
        "󰕿",
        "󰖀",
        "󰕾"
      ]
    },
    "on-click": "volume mute",
    "on-click-middle": "pavucontrol",
    "on-scroll-up": "pactl set-sink-volume @DEFAULT_SINK@ +5%",
    "on-scroll-down": "pactl set-sink-volume @DEFAULT_SINK@ -5%",
    "smooth-scrolling-threshold": 1
  },
  "pulseaudio#mic": {
    "format": "{format_source}",
    "format-source": "",
    "format-source-muted": "",
    "tooltip-format": "{volume}% {format_source} ",
    "on-click": "pactl set-source-mute 0 toggle",
    "on-scroll-down": "pactl set-source-volume 0 -1%",
    "on-scroll-up": "pactl set-source-volume 0 +1%"
  },
  "pulseaudio/slider": {
    "min": 0,
    "max": 140,
    "orientation": "vertical"
  },
  "network": {
    "format": "{icon}",
    "format-icons": {
      "wifi": [
        "󰤨"
      ],
      "ethernet": [
        "󰈀"
      ],
      "disconnected": [
        "󰖪"
      ]
    },
    "format-wifi": "󰤨",
    "format-ethernet": "󰈀",
    "format-disconnected": "󰖪",
    "format-linked": "󰈁",
    "tooltip": false,
    "on-click": "pgrep -x rofi &>/dev/null && notify-send rofi || networkmanager_dmenu"
  },
  "network#speed": {
    "format": " {bandwidthDownBits} ",
    "rotate": 90,
    "interval": 5,
    "tooltip-format": "{ipaddr}",
    "tooltip-format-wifi": "{essid} ({signalStrength}%)   \n{ipaddr} | {frequency} MHz{icon} ",
    "tooltip-format-ethernet": "{ifname} 󰈀 \n{ipaddr} | {frequency} MHz{icon} ",
    "tooltip-format-disconnected": "Not Connected to any type of Network",
    "tooltip": true,
    "on-click": "pgrep -x rofi &>/dev/null && notify-send rofi || networkmanager_dmenu"
  },
  "bluetooth": {
    "format-on": "",
    "format-off": "󰂲",
    "format-disabled": "",
    "format-connected": "<b></b>",
    "tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected",
    "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}",
    "tooltip-format-enumerate-connected": "{device_alias}\t{device_address}",
    "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%",
    "on-click": "rofi-bluetooth -config ~/.config/rofi/menu.d/network.rasi -i"
  },
  "bluetooth#status": {
    "format-on": "",
    "format-off": "",
    "format-disabled": "",
    "format-connected": "<b>{num_connections}</b>",
    "format-connected-battery": "<small><b>{device_battery_percentage}%</b></small>",
    "tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected",
    "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}",
    "tooltip-format-enumerate-connected": "{device_alias}\t{device_address}",
    "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%",
    "on-click": "rofi-bluetooth -config ~/.config/rofi/menu.d/network.rasi -i"
  },
  "battery": {
    "rotate": 270,
    "states": {
      "good": 95,
      "warning": 30,
      "critical": 15
    },
    "format": "{icon}",
    "format-charging": "<b>{icon} </b>",
    "format-full": "<span color='#82A55F'><b>{icon}</b></span>",
    "format-icons": [
      "󰁻",
      "󰁼",
      "󰁾",
      "󰂀",
      "󰂂",
      "󰁹"
    ],
    "tooltip-format": "{timeTo} {capacity} % | {power} W"
  },
  "clock": {
    "format": "{:%H\n%M}",
    "tooltip-format": "<tt><small>{calendar}</small></tt>",
    "calendar": {
      "mode": "month",
      "mode-mon-col": 3,
      "weeks-pos": "right",
      "on-scroll": 1,
      "on-click-right": "mode",
      "format": {
        "today": "<span color='#a6e3a1'><b><u>{}</u></b></span>"
      }
    }
  },
  "power-profiles-daemon": {
    "format": "{icon}",
    "tooltip-format": "Power profile: {profile}\nDriver: {driver}",
    "tooltip": true,
    "format-icons": {
      "default": "",
      "performance": "<span color='#B37F34'><small></small></span>",
      "balanced": "<span><small> </small></span>",
      "power-saver": "<span color='#a6e3a1'><small></small></span>"
    }
  },
  "custom/hyprshade": {
    "format": "{}",
    "tooltip": true,
    "signal": 11,
    "exec": "toggle-hyprshade status",
    "on-click": "toggle-hyprshade",
    "return-type": "json"
  },
  "custom/weather": {
    "format": "{}",
    "tooltip": true,
    "interval": 3600,
    "exec": "wttrbar --custom-indicator '{ICON}\n<b>{temp_C}</b>' --location noida",
    "return-type": "json"
  },
  "custom/updates": {
    "format": "{}",
    "interval": 10800,
    "exec": "~/.config/waybar/bin/updatecheck",
    "return-type": "json",
    "exec-if": "exit 0",
    "signal": 8
  },
  "custom/vpn": {
    "format": "{} ",
    "exec": "~/.config/waybar/bin/vpn",
    "return-type": "json",
    "interval": 5
  },
  "custom/hotspot": {
    "format": "{} ",
    "exec": "~/.config/waybar/bin/hotspot",
    "return-type": "json",
    "on-click": "hash wihotspot && wihotspot",
    "interval": 5
  },
  "custom/mark": {
    "format": "",
    "tooltip": false
  },
  "custom/colorpicker": {
    "format": "{}",
    "return-type": "json",
    "interval": "once",
    "exec": "colorpicker -j",
    "on-click": "sleep 1 && colorpicker",
    "signal": 1
  },
  "custom/hyprkill": {
    "format": "{}",
    "interval": "once",
    "exec": "echo '󰅙\nKill clients using hyrpctl kill'",
    "on-click": "sleep 1 && hyprctl kill"
  },
  "custom/notifications": {
    "format": "<b>{}</b> ",
    "exec": "noti-cycle -j",
    "on-click": "noti-cycle",
    "on-click-right": "noti-cycle rofi",
    "return-type": "json",
    "interval": "once",
    "signal": 2
  },
  "custom/github": {
    "format": "{}",
    "return-type": "json",
    "interval": 3600,
    "signal": 9,
    "exec": "$HOME/.config/waybar/bin/github.sh",
    "on-click": "xdg-open https://github.com/notifications;pkill -RTMIN+9 waybar"
  },
  "idle_inhibitor": {
    "format": "{icon}",
    "tooltip-format-activated": "Idle Inhibitor is active",
    "tooltip-format-deactivated": "Idle Inhibitor is not active",
    "format-icons": {
      "activated": "󰔡",
      "deactivated": "󰔢"
    }
  }
}

@import "colors.css";
@define-color active @color6;

* {
  font-size: 16px;
  font-family: "JetBrainsMono Nerd Font,JetBrainsMono NF";
  min-width: 8px;
  min-height: 0px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding: 0px;

}

window#waybar {
  transition-property: background-color;
  transition-duration: 0.5s;
  border-radius: 8px;
  border: 2px solid @active;
  background: @background;
  background: alpha(@background, 0.7);
  color: lighter(@active);
}

menu,
tooltip {
  border-radius: 8px;
  padding: 2px;
  border: 1px solid lighter(@active);
  background: alpha(@background, 0.6);

  color: lighter(@active);
}

menu label,
tooltip label {
  font-size: 14px;
  color: lighter(@active);
}

#submap,
#tray>.needs-attention {
  animation-name: blink-active;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.modules-right {
  margin: 0px 6px 6px 6px;
  border-radius: 4px;
  background: alpha(@background, 0.4);
  color: lighter(@active);
}

.modules-left {
  transition-property: background-color;
  transition-duration: 0.5s;
  margin: 6px 6px 6px 6px;
  border-radius: 4px;
  background: alpha(@background, 0.4);
  color: lighter(@active);
}

#gcpu,
#custom-github,
#memory,
#disk,
#together,
#submap,
#custom-weather,
#custom-recorder,
#connection,
#cnoti,
#brightness,
#power,
#custom-updates,
#tray,
#audio,
#privacy,
#sound {
  border-radius: 4px;
  margin: 2px 2px 4px 2px;
  background: alpha(darker(@active), 0.3);
}

#custom-notifications {
  padding-left: 4px;
}

#custom-hotspot,
#custom-github,
#custom-notifications {
  font-size: 14px;
}

#custom-hotspot {
  padding-right: 2px;
}

#custom-vpn,
#custom-hotspot {
  background: alpha(darker(@active), 0.3);
}

#privacy-item {
  padding: 6px 0px 6px 6px;
}

#gcpu {
  padding: 8px 0px 8px 0px;
}

#custom-cpu-icon {
  font-size: 25px;
}

#custom-cputemp,
#disk,
#memory,
#cpu {
  font-size: 14px;
  font-weight: bold;
}

#custom-github {
  padding-top: 2px;
  padding-right: 4px;
}

#custom-dmark {
  color: alpha(@foreground, 0.3);
}

#submap {
  margin-bottom: 0px;
}

#workspaces {
  margin: 0px 2px;
  padding: 4px 0px 0px 0px;
  border-radius: 8px;
}

#workspaces button {
  transition-property: background-color;
  transition-duration: 0.5s;
  color: @foreground;
  background: transparent;
  border-radius: 4px;
  color: alpha(@foreground, 0.3);
}

#workspaces button.urgent {
  font-weight: bold;
  color: @foreground;
}

#workspaces button.active {
  padding: 4px 2px;
  background: alpha(@active, 0.4);
  color: lighter(@active);
  border-radius: 4px;
}

#network.wifi {
  padding-right: 4px;
}

#submap {
  min-width: 0px;
  margin: 4px 6px 4px 6px;
}

#custom-weather,
#tray {
  padding: 4px 0px 4px 0px;
}

#bluetooth {
  padding-top: 2px;
}

#battery {
  border-radius: 8px;
  padding: 4px 0px;
  margin: 4px 2px 4px 2px;
}

#battery.discharging.warning {
  animation-name: blink-yellow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#battery.discharging.critical {
  animation-name: blink-red;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#clock {
  font-weight: bold;
  padding: 4px 2px 2px 2px;
}

#pulseaudio.mic {
  border-radius: 4px;
  color: @background;
  background: alpha(darker(@foreground), 0.6);
  padding-left: 4px;
}

#backlight-slider slider,
#pulseaudio-slider slider {
  background-color: transparent;
  box-shadow: none;
}

#backlight-slider trough,
#pulseaudio-slider trough {
  margin-top: 4px;
  min-width: 6px;
  min-height: 60px;
  border-radius: 8px;
  background-color: alpha(@background, 0.6);
}

#backlight-slider highlight,
#pulseaudio-slider highlight {
  border-radius: 8px;
  background-color: lighter(@active);
}

#bluetooth.discoverable,
#bluetooth.discovering,
#bluetooth.pairable {
  border-radius: 8px;
  animation-name: blink-active;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink-active {
  to {
    background-color: @active;
    color: @foreground;
  }
}

@keyframes blink-red {
  to {
    background-color: #c64d4f;
    color: @foreground;
  }
}

@keyframes blink-yellow {
  to {
    background-color: #cf9022;
    color: @foreground;
  }
}

in style.css at line 86 where i have added margin: 2px 2px 4px 2px; this margin is causing this issue if i remove it from the group elements then it work nice but looks odd.

is there other way to acheive the look without using the margin or the margin is bugged?

https://github.com/niksingh710/gdots/tree/master/.config/waybar My config for reference

[niksingh710]

aah my config.jsonc is

[
  {
  "output": [ "eDP-1" ],
    "include": [
      "~/.config/waybar/bars/top.jsonc",
    ],
  }
]

[voronind-com]

I also experience this issue but with padding on Sway.

[voronind-com]

I know that I can add padding to children, but I have a custom widget that can be shown or not, thus making it impossible to have constant padding attached to it (when it is not shown, waybar ignores its padding). I have to hack it by printing zero width space so that waybar keeps the padding even for "empty" output.