🐛 BUG: Styling on squads

[gui1612]

What went wrong

Even though Squads are still in beta, here are some problems that I found while using them:

• Problem 1: The images inside the post container don't have a fixed size such as in the regular feed. This makes the overall look of the squad pages a bit inconsistent.

• Problem 2: The reading history and Post buttons don't have a gap between each other and the Post button doesn't have a gap between itself and its parent container.

• Problem 3: In the reading history, in posts where the picture does not exist and is substituted by the initial part of the title, sometimes it overlaps the element below.

Expected Behavior

• Problem 1: The images should have a coherent styling and should be the same size, independently of the size of the description or the thumbnail's image.

• Problem 2: There should be no Post button inside the textbox when it's not on hover (since there is nothing to post) and the reading history href should have a gap on its right side, separating it from its parent

• Problem 3: The posts should be correctly spaced without contenting being shared between themselves. I would also suggest placing an image in there instead of the title even if it was a filler one, but that is not the scope of the problem and can be somewhat opinionated.

Steps to Reproduce Issue

Problems 1 and 2:

1. Go to squads
2. Join a squad
3. Go to that squad's page
4. See the error

Problems 3:

1. Go to squads
2. Join a squad
3. Go to that squad's page
4. Click on reading history
4. See the error

Solution Proposed

• Problem 1: The size of the image relatively to the container itself is fixed, to ensure a consistent size as in the regular feed.

• Problem 2: Remove the post button whenever the textbox is not on hover since it is not needed until it has some text on it.

• Problem 3: Limit the amount of text displayed in the title, or take it into consideration in the styles to resize the container accordingly.

Screenshots

Problem 1

Problem 2

Problem 3

Environment

6.5.9-1-MANJARO, Firefox Developer Edition 120.0b3 (tested on chrome too)

Browsers

Firefox

OS

Linux

Version of daily.dev

3.28.4

Code of Conduct

• I follow the conditions of this project.

[idoshamun]

Hi @gui1612,

Thank you for the detailed bug report.
I see that the image for problem 1 is broken. Could you please fix it? I'm not sure I understand.

[gui1612]

I'm glad to help @idoshamun!
The broken image should be fixed by now.

[idoshamun]

@gui1612 thanks for fixing. As for problem 1, it's a feature not a bug :P
Our design team wanted to make this space adjustable to the commentary written by the user

[gui1612]

Personally, I think it would be a good improvement to either have its size fixed when it goes to the "regular feed" section or to have an easy approachable option to remove the squad posts from the main feed (maybe in Feed Settings or something similar)

Regarding the feature, I can see reasons to do it on the squad page, because all posts have that styling, but when they get displayed in the user's feed, it does look a bit more glitchy since the other containers all have fixed sizes.

Having this said, take my opinion with a huge grain of salt. I'm trying to provide as much user feedback as possible, but this is a matter of personal opinion. 😅

[sshanzel]

To set things clear, we currently consider items 2 and 3 as valid issues. The fix for item 2 should be obvious (remove the unnecessary spacing in between). For Item 3, the text came from the image being unable to render, hence, the alt text of the image was rendered, we should maybe put a more concise message than repeating the post's title.

Edit: for item 3, the fix we are planning to have is to use the placeholder image we have when the post images are not available. The link should be available in the file shared/src/lib/image.ts.

[gui1612]

Looks like a good option to me @sshanzel!
Tell me if I can help in any way, either in the development process or by providing feedback. :)

[sshanzel]

@gui1612 hey there! Thank you for the offer! Would love to see PR being raised, but of course, only when you have some spare time.

In any case, to fix item 2, we have a component named SharePostBar that can be found on any Squad page. To create a Squad, there should be a button in the Sidebar that points to the creation page. For item 3, we have a component PostItemCard that renders an image component, we must pass the fallback placeholder for our posts.

[gui1612]

Okay, I'll look at it during the week following weeks! :)