Shared block displays incorrectly with RTL display names

[MrPetovan]

Originally posted by @AlfredSK in #8262 (comment)

Ha! Found one. :-)

Username and date of post are inserted on the right side. But it should be on the left side.

Steps to reproduce:

1. Import this post on your node https://venera.social/display/67851619-983298e32d387710-a32197cb
2. Or use the original https://persadon.com/@danialbehzadi/106521529502265000
3. Click on 'Quote Share'
4. Look at the preview

I only used the preview function to reproduce the issue. But the same happens with the submitted share.

[MrPetovan]

Thank you, this is perfect.

@ahangarha, what would be the expected display in this case?

[ahangarha]

This is how it should look I think:

All I did was to change css properies from left|right to relevant bidi values like start|end. If this is fine, then let me know. I will send PR.

(absolute positioning)
left -> inset-inline-start
right -> inset-inline-end

float: left -> float: inline-start

margin-right -> margin-inline-end

[MrPetovan]

Thank you, I have no other source of truth than you in this matter, so I'll go forward with your display through your suggested values.

[ahangarha]

Does that mean you apply the style or I should do it?

[MrPetovan]

If you don't submit a PR yourself, I will based on your suggestion in the coming week.

[MrPetovan]

Unfortunately the float: inline-start value is only supported by Firefox, so the display name will not be aligned with the profile picture on any other browser.

See display on Chrome-based browser:

I wonder if we can achieve the same look with flex blocks.

[MrPetovan]

It works with flex boxes!

I took advantage of this change to increase the avatar size to match the height of the share block header.

Onwards to the other themes!

[ahangarha]

I took advantage of this change to increase the avatar size to match the height of the share block header.

Actually it is a good improvement. Just I have a suggestion. If you are changing this, then it should also change in timeline as well. Logically the preview here should be as identical as possible to what would be shown in timeline.

I also assume UX also should be considered in this case. If one have mixed content in timeline, then would it be good to have some posts' header right to left and some others left to right? Not sure. I think we can try it and see the result in action.

[AlfredSK]

I would suggest the same display as we use for normal, top-level posts. The avatar on the left. The user name on the left - as we do it with LTR posts. But the content of the post on the right side.

Other ways would be too confusing. But that's only my point of view. Sorry that I'm German. 😋

[ahangarha]

I would agree to follow same layout for better UX.