Help: The icons in the title are increasing the waybar height.

[klinkonskydev]

Environment

I'm using Arch Linux, Hyprland and Waybar

Problem description

When I'm using Firefox/Chromium and I open an application with icons in the title, the waybar automatically increase the height, as shown in the image below:

but, the normal height is:

My configuration

Title configuration

  "hyprland/window": {
    "format": "<span font='14px'><span color='#97b4f2'>󰊠</span> {title}</span>",
    "tooltip": false
  },

Global style

* {
  font-family: GeistMono Nerd Font;
  font-size: 14px;
  font-weight: 500;
  min-height: 0;
  margin: 0;
  padding: 0;
}

[msmafra]

You probably need to set the icon-size property
https://github.com/Alexays/Waybar/wiki/Module:-Hyprland#window

[klinkonskydev]

You probably need to set the icon-size property https://github.com/Alexays/Waybar/wiki/Module:-Hyprland#window

I've applied the icon-size property, but the problem persists :(

[msmafra]

You probably need to set the icon-size property https://github.com/Alexays/Waybar/wiki/Module:-Hyprland#window

I've applied the icon-size property, but the problem persists :(

Would you mind sharing your config files (CSS and JSONC)?

In my CSS I have this reset

* {
    all: unset;
    font-size: 12px;
    font-family: "Inter Variable", "Symbols Nerd Font";
    font-feature-settings: '"zero", "tnum", "ss01", "ss02", "ss03", "cv01", "cv05", "cv08", "cv10", "cv11", "cpsp", "case"';
    font-weight: 600;
    border-radius: 0;
    animation-timing-function: steps(12);
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.79, 0.33, 0.14, 0.53);
}

And I use REM instead of other size unit for font, margin, padding etc:

.module {
    background: transparent;
    padding: 0;
    margin: 0;
}

label.module {
    font-size: 1.3rem;
}

[klinkonskydev]

You probably need to set the icon-size property https://github.com/Alexays/Waybar/wiki/Module:-Hyprland#window

I've applied the icon-size property, but the problem persists :(

Would you mind sharing your config files (CSS and JSONC)?

In my CSS I have this reset

* {
    all: unset;
    font-size: 12px;
    font-family: "Inter Variable", "Symbols Nerd Font";
    font-feature-settings: '"zero", "tnum", "ss01", "ss02", "ss03", "cv01", "cv05", "cv08", "cv10", "cv11", "cpsp", "case"';
    font-weight: 600;
    border-radius: 0;
    animation-timing-function: steps(12);
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.79, 0.33, 0.14, 0.53);
}

And I use REM instead of other size unit for font, margin, padding etc:

.module {
    background: transparent;
    padding: 0;
    margin: 0;
}

label.module {
    font-size: 1.3rem;
}

Perfect, my configuration (even with reset the problem persists):

config

{
  "modules-left": ["hyprland/workspaces", "hyprland/window"],
  "modules-right": ["tray", "group/hardware", "group/control", "clock"],
  "spacing": 8,
  "output": ["DP-3"],
  "expand": false,
  "hyprland/workspaces": {
    "active-only": false,
    "sort-by-number": true,
    "on-click": "activate",
    "all-outputs": false,
    "format": "{icon}",
    "format-icons": {
      "active": "󰮯",
      "default": "•",
    },
    "workspace-taskbar": {
      "icon-size": 14,
    },
  },
  "hyprland/window": {
    "format": "<span font='14px'><span color='#97b4f2'>󰊠</span> {title}</span>",
    "tooltip": false,
    "icon-size": 14
  },
  "tray": {
    "icon-size": 14,
    "spacing": 16,
  },
  "group/hardware": {
    "orientation": "horizontal",
    "modules": ["cpu", "temperature", "memory"],
  },
  "cpu": {
    "format": "<span color='#b6cad2'>󰍛</span> {usage}%",
    "interval": 2,
    "on-click": "foot -T 'Task Manager' btop",
  },
  "temperature": {
    "format": "<span color='#f2979c'></span> {temperatureC}C",
    "interval": 2,
    "on-click": "foot -T 'Task Manager' btop",
    "tooltip-format": "Max before throttling: 105 °C",
  },
  "memory": {
    "format": "<span color='#cd97f2'>󰘚</span> {used:.2g}GB",
    "interval": 2,
    "on-click": "foot -T 'Task Manager' btop",
    "tooltip-format": "Used  : {used}\nAvail : {avail}\nTotal : {total}",
  },
  "group/control": {
    "orientation": "horizontal",
    "modules": ["battery", "network", "bluetooth", "pulseaudio"],
  },
  "network": {
    "format-ethernet": "<span color='#97d8f2'>󰈀</span> {bandwidthDownBytes:=}",
    "format-wifi": "<span color='#97d8f2'>{icon}</span> {bandwidthDownBytes:=}",
    "format-disconnected": "<span color='#97d8f2'>󰤭</span> {bandwidthDownBytes:=}",
    "format-icons": ["󰤯", "󰤟", "󰤢", "󰤥", "󰤨"],
    "interval": 2,
    "tooltip-format": "{essid}",
    "on-click": "foot -T 'WiFi Manager' impala",
  },
  "bluetooth": {
    "format": "<span color='#97b4f2'></span> {status}",
    "format-connected-battery": "<span color='#97b4f2'></span> {device_battery_percentage}%",
    "tooltip-format": "{device_alias} {status}",
    "on-click": "foot -T 'Bluetooth Manager' bluetui",
  },
  "pulseaudio": {
    "format": "<span color='#f2979c'>{icon}</span> {volume}%",
    "format-muted": "<span color='#f2979c'>󰖁</span> {volume}%",
    "format-bluetooth": "<span color='#f2979c'>{icon}</span> {volume}%",
    "format-bluetooth-muted": "<span color='#f2979c'>󰖁</span> {volume}%",
    "format-icons": {
      "headphone": "󰋋",
      "phone": "󰏲",
      "portable": "󰏲",
      "default": ["󰕿", "󰖀", "󰕾"],
    },
    "on-click": "foot -T 'Audio Manager' wiremix",
  },
  "clock#simpleclock": {
    "tooltip": false,
    "format": "  {:%H:%M}",
  },
  "clock": {
    // "timezone": "Asia/Jakarta",
    // "format": "<span color='#f2d297'>󰥔</span> {:%a %b %d %R %p}",
    // "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
    "format": "  {:L%a %d %b}",
    "calendar": {
      "format": {
        "days": "<span weight='normal'>{}</span>",
        "months": "<span color='#cdd6f4'><b>{}</b></span>",
        "today": "<span color='#f38ba8' weight='700'><u>{}</u></span>",
        "weekdays": "<span color='#f9e2af'><b>{}</b></span>",
        "weeks": "<span color='#a6e3a1'><b>W{}</b></span>",
      },
      "mode": "month",
      "mode-mon-col": 1,
      "on-scroll": 1,
    },
    "tooltip-format": "<span font='GeistMono Nerd Font 16'><tt><small>{calendar}</small></tt></span>",
  },
}

style.css

@define-color background rgba(30,30,30,0.80);
@define-color foreground #ebebeb;
@define-color yellow #f2d297;

* {
  all: unset;
  font-size: 12px;
  font-family: GeistMono Nerd Font;
  font-feature-settings: '"zero", "tnum", "ss01", "ss02", "ss03", "cv01", "cv05", "cv08", "cv10", "cv11", "cpsp", "case"';
  font-weight: 600;
  border-radius: 0;
  animation-timing-function: steps(12);
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.79, 0.33, 0.14, 0.53);
}

#waybar {
  background-color: transparent;
}

#waybar > box {
  margin: 8px 8px 0 8px;
}

#workspaces,
#window,
#tray,
#hardware,
#control,
#clock {
  background-color: @background;
  color: @foreground;
  padding: 5px 16px;
  border-radius: 32px;
}

#hardware #cpu,
#hardware #temperature,
#control #battery,
#control #network,
#control #bluetooth {
  margin-right: 16px;
}

/* Workspaces module is built different */

#workspaces {
  padding: 0 9px;
}

#workspaces button {
  color: @foreground;
  padding: 0;
  border-radius: 32px;
}

#workspaces button.active {
  color: @yellow;
}

/* Spacing for long window title */
#window {
  margin-right: 8px;
}

/* Padding for empty window title */
#waybar.empty #window {
  padding-right: 8px;
}

tooltip {
  background-color: rgba(30,30,30,1);
  color: @foreground;
  border: 1px solid rgba(255,255,255,0.30);
}

[msmafra]

Normal for me. Not sure what's happening. On my machine it did not behave like that on Hyprland nor Niri on using the config you provided (and adapted a bit to test also on Niri)

❯ inxi -S
System:
  Host: tars Kernel: 6.12.66-2-cachyos-lts
    arch: x86_64 bits: 64
  Desktop: Hyprland v: 0.53.1
    Distro: CachyOS

❯ waybar --version
Waybar v0.14.0

❯ doas pacman -Qi waybar
Installed From  : cachyos-extra-v3
Name            : waybar
Version         : 0.14.0-6.2
Description     : Highly customizable Wayland
                  bar for Sway and Wlroots
                  based compositors
Architecture    : x86_64_v3
URL             : https://github.com/Alexays/Waybar/
Licenses        : MIT