Conversation item border is cut of when tabbing

[nickvergessen]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

Steps to reproduce

1. Click into the search and tab into the conversation list

Expected behaviour

Border around the conversation

Actual behaviour

is cut off:

Talk app

**Talk app version:**stable27

[nickvergessen]

cc @DorraJaouad

[SystemKeeper]

Thought this was fixed by #10359. Leaving as a reference here.

[DorraJaouad]

It is related to the virtual scroller. As checked, it seems that CONVERSATION_ITEM_SIZE should be 68 instead of 66 to take into account the border's width.
cc @ShGKme

The min-height style for the wrapper is calculated based on the items' total size.

[nickvergessen]

#10359 fixed left/right cut off 🙊

[ShGKme]

#10359 fixed left/right cut off 🙊

It has 2 fixes: left/right cut off and size adjustment for outline cut of.

It is related to the virtual scroller. As checked, it seems that CONVERSATION_ITEM_SIZE should be 69 or 70 instead of 68 to take into account the border's width.

CONVERSATION_ITEM_SIZE is correct.

Its own height is 64px. And there is a 2px margin, but it is a classic margin, so it has collapsing. 64px item + 2px bottom margin + 2px top margin + 64px second item is 64 * 2 + 2px, margins doesn't add. So the element size is actually 66px.

Outline is also 2px, so margin is enough for outline.

The problem is that with collapsing margins total height is not item_size * item_count. It is item_size * item_count + 1 margin for one not collapsed margin.

This +1 should not be fixed by item_size.

For example, 3 items is:

[margin=2]
- (item=64)
[margin=2]
- (item=64)
[margin=2]
- (item=64)
[margin=2]

Height is (64 + 2) * 3 + 2 = 200, not (64 + 4) * 3 = 204.

---

So the problem is to add this 2px to the entire container, not to each conversation.

[ShGKme]

Fixing height with virtual scrolling could be tricky, we can just set CONVERSATION_ITEM_SIZE=68px, then it will act like margins are not collapsed, but visual margin between items will be 2 times large: 4px instead of 2px from NcListItem

[ShGKme]

Another alternative could be using padding + border instead of outline.

With outline visible element is large than its actual size