Inconsistent spacing between text and logo in notification area

[AlexNabokikh]

Hey all,

I've noticed that some applications, like Gnome Pomodoro Timer and Brave Browser, have a good amount of spacing between their logo and the notification text (see the screenshot below). However, other applications like Telegram or Spotify have no space between the logo and text, and it doesn't look right.

I am using the latest style.css catppuccin macchiato theme (with the only change of fonts), and I don't use any additional configurations or modules for Swaync.

* {
  all: unset;
  font-size: 14px;
  font-family: "Roboto Nerd Font";
  transition: 200ms;
}

trough highlight {
  background: #cad3f5;
}

scale trough {
  margin: 0rem 1rem;
  background-color: #363a4f;
  min-height: 8px;
  min-width: 70px;
}

slider {
  background-color: #8aadf4;
}

.floating-notifications.background .notification-row .notification-background {
  box-shadow:
    0 0 8px 0 rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #363a4f;
  border-radius: 12.6px;
  margin: 18px;
  background-color: #24273a;
  color: #cad3f5;
  padding: 0;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification {
  padding: 7px;
  border-radius: 12.6px;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification.critical {
  box-shadow: inset 0 0 7px 0 #ed8796;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  .notification-content {
  margin: 7px;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  .notification-content
  .summary {
  color: #cad3f5;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  .notification-content
  .time {
  color: #a5adcb;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  .notification-content
  .body {
  color: #cad3f5;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > * {
  min-height: 3.4em;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #363a4f;
  box-shadow: inset 0 0 0 1px #494d64;
  margin: 7px;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #363a4f;
  color: #cad3f5;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #cad3f5;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .close-button {
  margin: 7px;
  padding: 2px;
  border-radius: 6.3px;
  color: #24273a;
  background-color: #ed8796;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .close-button:hover {
  background-color: #ee99a0;
  color: #24273a;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .close-button:active {
  background-color: #ed8796;
  color: #24273a;
}

.control-center {
  box-shadow:
    0 0 8px 0 rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #363a4f;
  border-radius: 12.6px;
  margin: 18px;
  background-color: #24273a;
  color: #cad3f5;
  padding: 14px;
}

.control-center .widget-title > label {
  color: #cad3f5;
  font-size: 1.3em;
}

.control-center .widget-title button {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #363a4f;
  box-shadow: inset 0 0 0 1px #494d64;
  padding: 8px;
}

.control-center .widget-title button:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #5b6078;
  color: #cad3f5;
}

.control-center .widget-title button:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #24273a;
}

.control-center .notification-row .notification-background {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #363a4f;
  box-shadow: inset 0 0 0 1px #494d64;
  margin-top: 14px;
}

.control-center .notification-row .notification-background .notification {
  padding: 7px;
  border-radius: 7px;
}

.control-center
  .notification-row
  .notification-background
  .notification.critical {
  box-shadow: inset 0 0 7px 0 #ed8796;
}

.control-center
  .notification-row
  .notification-background
  .notification
  .notification-content {
  margin: 7px;
}

.control-center
  .notification-row
  .notification-background
  .notification
  .notification-content
  .summary {
  color: #cad3f5;
}

.control-center
  .notification-row
  .notification-background
  .notification
  .notification-content
  .time {
  color: #a5adcb;
}

.control-center
  .notification-row
  .notification-background
  .notification
  .notification-content
  .body {
  color: #cad3f5;
}

.control-center
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > * {
  min-height: 3.4em;
}

.control-center
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #181926;
  box-shadow: inset 0 0 0 1px #494d64;
  margin: 7px;
}

.control-center
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #363a4f;
  color: #cad3f5;
}

.control-center
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #cad3f5;
}

.control-center .notification-row .notification-background .close-button {
  margin: 7px;
  padding: 2px;
  border-radius: 6.3px;
  color: #24273a;
  background-color: #ee99a0;
}

.close-button {
  border-radius: 6.3px;
}

.control-center .notification-row .notification-background .close-button:hover {
  background-color: #ed8796;
  color: #24273a;
}

.control-center
  .notification-row
  .notification-background
  .close-button:active {
  background-color: #ed8796;
  color: #24273a;
}

.control-center .notification-row .notification-background:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #8087a2;
  color: #cad3f5;
}

.control-center .notification-row .notification-background:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #cad3f5;
}

.notification.critical progress {
  background-color: #ed8796;
}

.notification.low progress,
.notification.normal progress {
  background-color: #8aadf4;
}

.control-center-dnd {
  margin-top: 5px;
  border-radius: 8px;
  background: #363a4f;
  border: 1px solid #494d64;
  box-shadow: none;
}

.control-center-dnd:checked {
  background: #363a4f;
}

.control-center-dnd slider {
  background: #494d64;
  border-radius: 8px;
}

.widget-dnd {
  margin: 0px;
  font-size: 1.1rem;
}

.widget-dnd > switch {
  font-size: initial;
  border-radius: 8px;
  background: #363a4f;
  border: 1px solid #494d64;
  box-shadow: none;
}

.widget-dnd > switch:checked {
  background: #363a4f;
}

.widget-dnd > switch slider {
  background: #494d64;
  border-radius: 8px;
  border: 1px solid #6e738d;
}

.widget-mpris .widget-mpris-player {
  background: #363a4f;
  padding: 7px;
}

.widget-mpris .widget-mpris-title {
  font-size: 1.2rem;
}

.widget-mpris .widget-mpris-subtitle {
  font-size: 0.8rem;
}

.widget-menubar > box > .menu-button-bar > button > label {
  font-size: 3rem;
  padding: 0.5rem 2rem;
}

.widget-menubar > box > .menu-button-bar > :last-child {
  color: #ed8796;
}

.power-buttons button:hover,
.powermode-buttons button:hover,
.screenshot-buttons button:hover {
  background: #363a4f;
}

.control-center .widget-label > label {
  color: #cad3f5;
  font-size: 2rem;
}

.widget-buttons-grid {
  padding-top: 1rem;
}

.widget-buttons-grid > flowbox > flowboxchild > button label {
  font-size: 2.5rem;
}

.widget-volume {
  padding-top: 1rem;
}

.widget-volume label {
  font-size: 1.5rem;
  color: #7dc4e4;
}

.widget-volume trough highlight {
  background: #7dc4e4;
}

.widget-backlight trough highlight {
  background: #eed49f;
}

.widget-backlight scale {
  margin-right: 1rem;
}

.widget-backlight label {
  font-size: 1.5rem;
  color: #eed49f;
}

.widget-backlight .KB {
  padding-bottom: 1rem;
}

[isabelroses]

this should be closed by 507d5cc

[AlexNabokikh]

@isabelroses Thank you for your prompt response! The issue persists even after the changes were added. I restarted the Swaync daemon, rebooted the system, and rechecked everything on my end. I am out of ideas on what I am doing wrong.

Screenshot of the problem after the update:

style.css after update:

* {
  all: unset;
  font-size: 14px;
  font-family: "Roboto Nerd Font";
  transition: 200ms;
}

trough highlight {
  background: #cad3f5;
}

scale trough {
  margin: 0rem 1rem;
  background-color: #363a4f;
  min-height: 8px;
  min-width: 70px;
}

slider {
  background-color: #8aadf4;
}

.floating-notifications.background .notification-row .notification-background {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f;
  border-radius: 12.6px;
  margin: 18px;
  background-color: #24273a;
  color: #cad3f5;
  padding: 0;
}

.floating-notifications.background .notification-row .notification-background .notification {
  padding: 7px;
  border-radius: 12.6px;
}

.floating-notifications.background .notification-row .notification-background .notification.critical {
  box-shadow: inset 0 0 7px 0 #ed8796;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content {
  padding-left: 7px;
  margin: 7px;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content .summary {
  color: #cad3f5;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content .time {
  color: #a5adcb;
}

.floating-notifications.background .notification-row .notification-background .notification .notification-content .body {
  color: #cad3f5;
}

.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * {
  min-height: 3.4em;
}

.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #363a4f;
  box-shadow: inset 0 0 0 1px #494d64;
  margin: 7px;
}

.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #363a4f;
  color: #cad3f5;
}

.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #cad3f5;
}

.floating-notifications.background .notification-row .notification-background .close-button {
  margin: 7px;
  padding: 2px;
  border-radius: 6.3px;
  color: #24273a;
  background-color: #ed8796;
}

.floating-notifications.background .notification-row .notification-background .close-button:hover {
  background-color: #ee99a0;
  color: #24273a;
}

.floating-notifications.background .notification-row .notification-background .close-button:active {
  background-color: #ed8796;
  color: #24273a;
}

.control-center {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #363a4f;
  border-radius: 12.6px;
  margin: 18px;
  background-color: #24273a;
  color: #cad3f5;
  padding: 14px;
}

.control-center .widget-title > label {
  color: #cad3f5;
  font-size: 1.3em;
}

.control-center .widget-title button {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #363a4f;
  box-shadow: inset 0 0 0 1px #494d64;
  padding: 8px;
}

.control-center .widget-title button:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #5b6078;
  color: #cad3f5;
}

.control-center .widget-title button:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #24273a;
}

.control-center .notification-row .notification-background {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #363a4f;
  box-shadow: inset 0 0 0 1px #494d64;
  margin-top: 14px;
}

.control-center .notification-row .notification-background .notification {
  padding: 7px;
  border-radius: 7px;
}

.control-center .notification-row .notification-background .notification.critical {
  box-shadow: inset 0 0 7px 0 #ed8796;
}

.control-center .notification-row .notification-background .notification .notification-content {
  margin: 7px;
}

.control-center .notification-row .notification-background .notification .notification-content .summary {
  color: #cad3f5;
}

.control-center .notification-row .notification-background .notification .notification-content .time {
  color: #a5adcb;
}

.control-center .notification-row .notification-background .notification .notification-content .body {
  color: #cad3f5;
}

.control-center .notification-row .notification-background .notification > *:last-child > * {
  min-height: 3.4em;
}

.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action {
  border-radius: 7px;
  color: #cad3f5;
  background-color: #181926;
  box-shadow: inset 0 0 0 1px #494d64;
  margin: 7px;
}

.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #363a4f;
  color: #cad3f5;
}

.control-center .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #cad3f5;
}

.control-center .notification-row .notification-background .close-button {
  margin: 7px;
  padding: 2px;
  border-radius: 6.3px;
  color: #24273a;
  background-color: #ee99a0;
}

.close-button {
  border-radius: 6.3px;
}

.control-center .notification-row .notification-background .close-button:hover {
  background-color: #ed8796;
  color: #24273a;
}

.control-center .notification-row .notification-background .close-button:active {
  background-color: #ed8796;
  color: #24273a;
}

.control-center .notification-row .notification-background:hover {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #8087a2;
  color: #cad3f5;
}

.control-center .notification-row .notification-background:active {
  box-shadow: inset 0 0 0 1px #494d64;
  background-color: #7dc4e4;
  color: #cad3f5;
}

.notification.critical progress {
  background-color: #ed8796;
}

.notification.low progress,
.notification.normal progress {
  background-color: #8aadf4;
}

.control-center-dnd {
  margin-top: 5px;
  border-radius: 8px;
  background: #363a4f;
  border: 1px solid #494d64;
  box-shadow: none;
}

.control-center-dnd:checked {
  background: #363a4f;
}

.control-center-dnd slider {
  background: #494d64;
  border-radius: 8px;
}

.widget-dnd {
  margin: 0px;
  font-size: 1.1rem;
}

.widget-dnd > switch {
  font-size: initial;
  border-radius: 8px;
  background: #363a4f;
  border: 1px solid #494d64;
  box-shadow: none;
}

.widget-dnd > switch:checked {
  background: #363a4f;
}

.widget-dnd > switch slider {
  background: #494d64;
  border-radius: 8px;
  border: 1px solid #6e738d;
}

.widget-mpris .widget-mpris-player {
  background: #363a4f;
  padding: 7px;
}

.widget-mpris .widget-mpris-title {
  font-size: 1.2rem;
}

.widget-mpris .widget-mpris-subtitle {
  font-size: 0.8rem;
}

.widget-menubar > box > .menu-button-bar > button > label {
  font-size: 3rem;
  padding: 0.5rem 2rem;
}

.widget-menubar > box > .menu-button-bar > :last-child {
  color: #ed8796;
}

.power-buttons button:hover,
.powermode-buttons button:hover,
.screenshot-buttons button:hover {
  background: #363a4f;
}

.control-center .widget-label > label {
  color: #cad3f5;
  font-size: 2rem;
}

.widget-buttons-grid {
  padding-top: 1rem;
}

.widget-buttons-grid > flowbox > flowboxchild > button label {
  font-size: 2.5rem;
}

.widget-volume {
  padding-top: 1rem;
}

.widget-volume label {
  font-size: 1.5rem;
  color: #7dc4e4;
}

.widget-volume trough highlight {
  background: #7dc4e4;
}

.widget-backlight trough highlight {
  background: #eed49f;
}

.widget-backlight scale {
  margin-right: 1rem;
}

.widget-backlight label {
  font-size: 1.5rem;
  color: #eed49f;
}

.widget-backlight .KB {
  padding-bottom: 1rem;
}

[isabelroses]

@isabelroses Thank you for your prompt response! The issue persists even after the changes were added. I restarted the Swaync daemon, rebooted the system, and rechecked everything on my end. I am out of ideas on what I am doing wrong.

That kinda sucks, if that wasn't the fix I won't be able to take a proper look for another 2 weeks or so when I can have access to a linux machine.

[AlexNabokikh]

@isabelroses That's fine. I didn't expect an immediate solution from individuals who are contributing to an open-source project without compensation. Thank you very much for your assistance. In the meantime, I will try to allocate some time to troubleshoot this issue though I have a very limited experience with CSS

[AlexNabokikh]

Hi @isabelroses, I apologize for bothering you again, but have you had a chance to look into the issue I brought up earlier? I reviewed the current style sheet, but I wasn't able to identify any obvious errors. However, my knowledge of CSS is limited, so I may have missed something. Thank you for your help.

[isabelroses]

Hi @isabelroses, I apologize for bothering you again, but have you had a chance to look into the issue I brought up earlier? I reviewed the current style sheet, but I wasn't able to identify any obvious errors. However, my knowledge of CSS is limited, so I may have missed something. Thank you for your help.

Hi @AlexNabokikh, thanks for the reminder. I was looking into this yesterday and think I believe i will be able to get a fix out by the end of this week.

[isabelroses]

officially fixed in 5515e42dbb4180d52d8b385626ffd2fd322707b3

[isabelroses]

just creating a new release now

[AlexNabokikh]

@isabelroses thank you so much for your help!