Profile picture becomes distorted in member profile when browser size is decreased

Question

Profile picture becomes distorted in member profile when browser size is decreased

Closed this issue 4 months ago · 14 comments

RiosNicholas commented 6 months ago

Description

The user's profile picture becomes distorted (shrunken horizontally) when the display becomes smaller 3

Steps to Reproduce

Steps to reproduce the behavior:

Go to the ColorStack Member Profile website
Click on 'Profile' on the sidebar
Decrease the width of your browser
See error.

Expected Behavior

The user's profile picture will be shrunken horizontally and become vertically off-center.

Screenshots

Additional Context

This occurs on the page where you edit your personal profile. This bug was detected on Firefox on my MacBook.

Answer 1 · 2024-04-12T19:51:31.000Z

@RiosNicholas this might be a MacOS issue because on my windows, my pfp does not get distorted

Answer 2 · 2024-04-13T21:43:22.000Z

I can take this on :)! It would be my first open source contribution

Answer 3 · 2024-04-13T23:26:28.000Z

I was planning to take it on, but I'm having issues getting my environment set up 😅. Please do work on it, though

Answer 4 · 2024-04-15T03:53:53.000Z

I tried to replicate this on MacOS with chrome and it seems to be working fine for me. Are there any additional steps to simulating the bug?

Answer 5 · 2024-04-15T04:48:04.000Z

Interesting... I'm on Firefox, so I wonder if the browser is part of the problem 🤔

Answer 6 · 2024-04-15T21:08:42.000Z

I tried to replicate it on Firefox and also started having issues with the build. Interesting, maybe there's something deeper? I couldn't get past the OTP screen.

Answer 7 · 2024-04-16T00:22:24.000Z

You're also having issues setting up your environment, or what do you mean? I just checked again and am still able to replicate the error 🤔

Answer 8 · 2024-04-25T21:37:47.000Z

@ciaracade I just assigned this ticket to you! Can't wait for you to get your first open-source contribution in!

Just a note - I think to reproduce this issue, you have to make your headline long enough to take 2 or more lines. It seems like that's causing the profile picture to shrink!

Answer 9 · 2024-04-26T12:23:55.000Z

Update for @ciaracade this issue now extends to safari users when I hit profile 😔

Answer 10 · 2024-05-10T04:56:52.000Z

Hey @ciaracade, are you still planning to work on this? I might take a look this weekend

Answer 11 · 2024-05-10T19:25:01.000Z

Hey @ramiAbdou, should I wait to proceed since I'm not assigned to this issue? Thanks

Answer 12 · 2024-05-10T21:25:49.000Z

@RiosNicholas Just confirmed with Ciara that you can take this one. Reassigning to you!

Answer 13 · 2024-05-11T05:00:03.000Z

I'm doing some investigating right now, and while I was unable to reproduce the bug in the dev environment, I found what is causing the issue. I noticed that having a long word (without spaces) as a header didn't result in word breaks. Rather, it would just proceed beyond the viewport width.

Initially, I didn't think implementing a word-break tailwind class into the Text component would be important, but I decided to do the same thing in the live member profile. I found that having long words will eventually cause the profile picture to disappear because there isn't space for the text to overflow in the deployed version's headline.

This draws me to conclude that the solution may include implementing a word wrap (word-break) prop in the Text component, and I'll work on that. @ramiAbdou

Answer 14 · 2024-05-11T05:25:48.000Z

Update: I solved it without having to update the component, but my commits went into the wrong PR 😭 . I'll fix