Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Message bubble layout has broken with the new look #25818

Closed
amshakal opened this issue Jul 17, 2023 · 15 comments · Fixed by matrix-org/matrix-react-sdk#11284 or matrix-org/matrix-react-sdk#11763
Closed

Message bubble layout has broken with the new look #25818

amshakal opened this issue Jul 17, 2023 · 15 comments · Fixed by matrix-org/matrix-react-sdk#11284 or matrix-org/matrix-react-sdk#11763
Assignees
@germain-gg
Labels
A-Timeline O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users T-Defect X-Regression Z-Compound

Comments

@amshakal
Copy link

amshakal commented Jul 17, 2023 •
edited
Loading

Steps to reproduce

  1. Turn message bubbles layout on in appearance settings
  2. View the timeline of any room
  3. Avatar, username and bubble are not overlapping anymore.

Outcome

What did you expect?

The avatar, username and bubble to be overlapping like designed

What happened instead?

Operating system

Macos Ventura Version 13.4.1

Application version

Element Nightly version: 2023071601
Olm version: 3.2.14

How did you install the app?

Using the link on Element.io

Homeserver

Matrix.org

Will you send logs?

Yes
@t3chguy
Copy link
Member

t3chguy commented Jul 17, 2023 •
edited
Loading

@amshakal any chance of a screenshot? And please fill the issue template fields, they're important. Without knowing what version you're using we have no way of knowing what broke it.

@t3chguy t3chguy added the X-Needs-Info This issue is blocked awaiting information from the reporter label Jul 17, 2023
@amshakal
Copy link
Author

Sure. Here is an Image:

Screenshot 2023-07-17 at 1 48 26 pm

@t3chguy
Copy link
Member

t3chguy commented Jul 17, 2023

Thanks @amshakal could you try post the application version again, the Olm version rarely changes - its the other version number we need

@amshakal
Copy link
Author

Done!

@t3chguy
Copy link
Member

t3chguy commented Jul 17, 2023

Perfect, thanks!

@t3chguy t3chguy added X-Regression S-Tolerable Low/no impact on users O-Occasional Affects or can be seen by some users regularly or most users rarely Z-Compound A-Timeline and removed X-Needs-Info This issue is blocked awaiting information from the reporter labels Jul 17, 2023
@germain-gg germain-gg self-assigned this Jul 18, 2023
@germain-gg germain-gg mentioned this issue Jul 18, 2023
Merged
3 tasks
@germain-gg germain-gg reopened this Aug 10, 2023
@germain-gg
Copy link
Contributor

This seems to be broken again

@manancodes
Copy link

manancodes commented Sep 25, 2023 •
edited
Loading

Can somebody share a screenshot/wireframe of the desired design so that I can get started on this? @germain-gg @t3chguy

@amshakal
Copy link
Author

amshakal commented Oct 12, 2023 •
edited
Loading

Here is the desired design for the message bubble avatar composition. :)
Screenshot 2023-10-12 at 1 04 03 pm

@manancodes
Copy link

manancodes commented Oct 12, 2023 •
edited
Loading

Hi @amshakal , thanks for the design.

The name also needs to be repositioned. In the desig "y" is almost touching the message bubble below.

Before:
Screenshot 2023-10-12 at 10 48 19 PM

After:
Screenshot 2023-10-12 at 10 47 55 PM

A few other questions that I have:

  1. The image is smaller than the design, should I increase that?
  2. What is the desired size of the image?
  3. If you look closely, there is a border between the image and the message. Should I add that too?

Please clarify the requirements so that I can draft a PR for this.

@amshakal
Copy link
Author

I think we can keep the image size and text position as is and I can test the PR and make calls.

It would be nice to add a white border around the image though yes.

@manancodes
Copy link

Sure. I will get started on this. Thanks

@manancodes manancodes mentioned this issue Oct 17, 2023
Merged
3 tasks
@manancodes
Copy link

I have opened a PR for this. Please take a look.

The border around the image is not looking very good if the message is highlighted. What's your opinion?

@amshakal
Copy link
Author

I would suggest that when highlighted, we should change the stroke colour to the background colour

@manancodes
Copy link

I would suggest that when highlighted, we should change the stroke colour to the background colour

Done.

I have also fixed it for Highlighted messages. Although the contrast is quiet not right.
Screenshot 2023-10-17 at 9 28 32 PM

@amshakal
Copy link
Author

Thank you!

gabrc52 added a commit to sipb/matrix-react-sdk that referenced this issue Nov 12, 2023
@gabrc52
Merge tag 'v3.84.0' into sipb
5fb7725 
* Knock on a ask-to-join room if a module wants to join the room when navigating to a room ([\matrix-org#11787](matrix-org#11787)). Contributed by @dhenneke.
* Element-R:  Include crypto info in sentry ([\matrix-org#11798](matrix-org#11798)). Contributed by @florianduros.
* Element-R:  Include crypto info in rageshake ([\matrix-org#11797](matrix-org#11797)). Contributed by @florianduros.
* Element-R: Add current version of the rust-sdk and vodozemac ([\matrix-org#11785](matrix-org#11785)). Contributed by @florianduros.
* Fix unfederated invite dialog ([\matrix-org#9618](matrix-org#9618)). Fixes element-hq/element-meta#1466 and element-hq/element-web#22102. Contributed by @owi92.
* New right panel visual language ([\matrix-org#11664](matrix-org#11664)).
* OIDC: add friendly errors ([\matrix-org#11184](matrix-org#11184)). Fixes element-hq/element-web#25665. Contributed by @kerryarchibald.
* Fix rightpanel hiding scrollbar ([\matrix-org#11831](matrix-org#11831)). Contributed by @kerryarchibald.
* Fix multi-tab session lock on Firefox not being cleared ([\matrix-org#11800](matrix-org#11800)). Fixes element-hq/element-web#26165. Contributed by @ManuelHu.
* Deserialise spoilers back into slash command form ([\matrix-org#11805](matrix-org#11805)). Fixes element-hq/element-web#26344.
* Fix Incorrect message scaling for verification request ([\matrix-org#11793](matrix-org#11793)). Fixes element-hq/element-web#24304. Contributed by @capGoblin.
* Fix: Unable to restore a soft-logged-out session established via SSO ([\matrix-org#11794](matrix-org#11794)). Fixes element-hq/element-web#25957. Contributed by @kerryarchibald.
* Use configurable github issue links more consistently ([\matrix-org#11796](matrix-org#11796)).
* Fix io.element.late_event received_ts vs received_at ([\matrix-org#11789](matrix-org#11789)).
* Make invitation dialog scrollable when infos are too long ([\matrix-org#11753](matrix-org#11753)). Contributed by @nurjinjafar.
* Fix spoiler text-align ([\matrix-org#11790](matrix-org#11790)). Contributed by @ajbura.
* Fix: Right panel keeps showing chat when unmaximizing widget.  ([\matrix-org#11697](matrix-org#11697)). Fixes element-hq/element-web#26265. Contributed by @manancodes.
* Fix margin of invite to room button ([\matrix-org#11780](matrix-org#11780)). Fixes element-hq/element-web#26410.
* Update base64 import ([\matrix-org#11784](matrix-org#11784)).
* Set max size for Element logo in search warning ([\matrix-org#11779](matrix-org#11779)). Fixes element-hq/element-web#26408.
* Fix: emoji size in room header topic, remove obsolete emoji style ([\matrix-org#11757](matrix-org#11757)). Fixes element-hq/element-web#26326. Contributed by @kerryarchibald.
* Fix: Bubble layout design is broken ([\matrix-org#11763](matrix-org#11763)). Fixes element-hq/element-web#25818. Contributed by @manancodes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@germain-gg germain-gg

Labels
A-Timeline O-Occasional Affects or can be seen by some users regularly or most users rarely S-Tolerable Low/no impact on users T-Defect X-Regression Z-Compound
Projects
None yet
Milestone
No milestone
4 participants
@germain-gg @t3chguy @manancodes @amshakal