Labels fall (partly) outside a message row when display density is set to Cozy (default) or Compact

mbjboon82 commented

2026-10-05 17:17:17 +00:00

Small bug :-)
In my example, on the left side display density is set to "Cozy" and on the right side to "Comfortable".
In "Cozy" the label falls partly outside the row and in "Compact" the label is fully outside.

I understand that if you make the rows higher to accomodate for the labels, the whole point of display density goes out the window.

My suggestion:

<div class="msg-body">
  <div class="msg-line1">
    <span class="msg-from truncate notranslate" translate="no">
      <span class="truncate">[sender]</span>
      // --- bring msg-labels to this spot when two-line compact or two-line, perhaps with a few pixels extra gap on the parent as there is plenty of space on this line
      <div class="msg-labels">
        <span class="tag" style="background: rgb(202, 138, 4);">[label name]</span>
      </div>
    </span>
    <span class="msg-meta">
      <span class="msg-date">18 sep</span>
    </span>
  </div>
  <div class="msg-main">
    <span class="msg-subject notranslate" translate="no">[subject]</span>
    <span class="msg-preview notranslate" translate="no">[message]</span>
    <button class="msg-star " aria-label="Ster" style="margin-left: auto;">[star]</button>
  </div>
  // --- original msg-labels position which makes it three-line 
</div>

Solution:

Small bug :-) In my example, on the left side display density is set to "Cozy" and on the right side to "Comfortable". In "Cozy" the label falls partly outside the row and in "Compact" the label is fully outside. I understand that if you make the rows higher to accomodate for the labels, the whole point of display density goes out the window. My suggestion: ``` <div class="msg-body"> <div class="msg-line1"> <span class="msg-from truncate notranslate" translate="no"> <span class="truncate">[sender]</span> // --- bring msg-labels to this spot when two-line compact or two-line, perhaps with a few pixels extra gap on the parent as there is plenty of space on this line <div class="msg-labels"> <span class="tag" style="background: rgb(202, 138, 4);">[label name]</span> </div> </span> <span class="msg-meta"> <span class="msg-date">18 sep</span> </span> </div> <div class="msg-main"> <span class="msg-subject notranslate" translate="no">[subject]</span> <span class="msg-preview notranslate" translate="no">[message]</span> <button class="msg-star " aria-label="Ster" style="margin-left: auto;">[star]</button> </div> // --- original msg-labels position which makes it three-line </div> ``` Solution: ![image.png](attachments/7469e6a5-d834-4623-af6f-b9446f285d14)

WhatsApp Image 2026-10-05 at 18.45.38.jpg

228 KiB

image.png

29 KiB

WhatsApp Image 2026-10-05 at 18.45.38.jpg

jcoffey-dev added the bug

priority

p3

labels 2026-10-05 17:27:07 +00:00

jcoffey-dev self-assigned this 2026-10-05 17:27:07 +00:00

jcoffey-dev referenced this issue from a commit

2026-10-05 17:32:20 +00:00

Keep a narrow list's labels inside the row, on the sender's line

jcoffey-dev referenced a pull request that will close this issue

2026-10-05 17:32:26 +00:00

Keep a narrow list's labels inside the row, on the sender's line #36

jcoffey-dev referenced this issue from a commit

2026-10-05 17:35:45 +00:00

Keep a narrow list's labels inside the row, on the sender's line (ihasmail #36)

jcoffey-dev referenced this issue from inbuxa/inbuxa-webmail

2026-10-05 17:35:50 +00:00

Fixes and Turkish from public ihasmail (#29–#36) #41

jcoffey-dev closed this issue

2026-10-05 17:43:06 +00:00

jcoffey-dev commented

2026-10-05 18:05:30 +00:00

Owner

Thanks for this, @mbjboon82, and for the suggested fix, which is what landed in #36.

On a phone or a narrow list, labels now sit on the sender's line, right after the name, instead of on a line of their own. Rows keep their height at every density, so nothing spills out at Cozy or Compact. When the line gets short, the name is shortened first, then the labels; the date always stays. The desktop one-line layout is unchanged.

It will be in the next release.

Thanks for this, @mbjboon82, and for the suggested fix, which is what landed in #36. On a phone or a narrow list, labels now sit on the sender's line, right after the name, instead of on a line of their own. Rows keep their height at every density, so nothing spills out at Cozy or Compact. When the line gets short, the name is shortened first, then the labels; the date always stays. The desktop one-line layout is unchanged. It will be in the next release.

Labels fall (partly) outside a message row when display density is set to Cozy (default) or Compact #35