Layout issues with misalignment and empty spaces in the followed channels page

[Porkepix]

Checklist

• [X] I understand that Streamlink Twitch GUI is just a launcher for Streamlink
• [X] I have read the contribution guidelines
• [X] I have checked the list of open and recently closed issues
• [X] I have checked the commit log of the master branch

Streamlink Twitch GUI version

v2.4.0

Streamlink version

Irrelevant, but latest

Operating system, environment and configuration details

Windows & Linux, probably mac too.

Description

This is a regression in release v2.4.0 (that could be caused by the underlying rendering engine), the issue wasn't there on previous version.

See screenshot below, on the followed channels page, the layout is broken on many places, without empty spaces here and there, and some misalignment to various places (the misalignment might be harder to catch on a pixelated screenshot).

Debug log

No response

[bastimeyer]

that could be caused by the underlying rendering engine

No, it's because of the added followed-since line https://github.com/streamlink/streamlink-twitch-gui/blame/9450eb1bf1c7c5f9240549bfe8b65a68ad45d25f/src/app/ui/components/list/channel-item/template.hbs#L22

The ChannelItemComponent does have an incorrect min-height, so the layout breaks, unfortunately.

I'll have a look later and then publish v2.4.1, sigh

[Porkepix]

that could be caused by the underlying rendering engine

No, it's because of the added followed-since line 9450eb1/src/app/ui/components/list/channel-item/template.hbs#L22 (blame)

The ChannelItemComponent does not have a min-height, so the layout breaks, unfortunately.

I'll have a look later and then publish v2.4.1, sigh

The problem seemed to be with the width rather than height, though? I didn't see any change for the height, and the misaligned elements were not aligned with their column, but correctly on their line.

II also got a feeling that in Followed > Channels, lines were slightly more spaced, but looking at changelog I believe nothing changed there and it's just my brain playing tricks to me.

[bastimeyer]

No, the issue is about the height, because channels which are online have one additional row, which breaks the layout with the newly added one.

This is the fix.

diff --git a/src/app/ui/components/list/channel-item/styles.less b/src/app/ui/components/list/channel-item/styles.less
index 9232a0d4..6774789f 100644
--- a/src/app/ui/components/list/channel-item/styles.less
+++ b/src/app/ui/components/list/channel-item/styles.less
@@ -5,7 +5,7 @@
 .channel-item-component {
    @logo: 6.5em;

-   min-height: 91px;
+   min-height: 110px;
    display: flex;
    margin-bottom: 1.5em;
    .dynamic-elems-per-row( 2, @content-width, 4%, @additional-width );