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.

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

fix: modify ui to prevent social image name overflow in page settings. #5088

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

victorchrollo14
Copy link
Contributor

Description

fixes: #4953

aligned the name and other contents properly preventing long image names from overflowing out of view.

Screenshot from 2025-04-04 09-25-03

Screenshot from 2025-04-04 09-24-57

Steps for reproduction

  1. click button
  2. expect xyz

Code Review

  • hi @kof, I need you to do
    • conceptual review (architecture, feature-correctness)
    • detailed review (read every line)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

<Text variant={"labelsTitleCase"}>
{asset.meta.width} x {asset.meta.height} Px
</Text>
</Flex>{" "}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

accident?

</Text>
<Grid
columns={1}
css={{ padding: theme.spacing[5], width: theme.spacing[34] }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This area of code is old:

  • I think you probably want theme.panel.padding

>
<Grid flow={"column"} gap={1} align={"center"}>
<ImageIcon />
<Text truncate css={{ width: 350 }} variant={"labelsTitleCase"}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you want the layout to define the width without hardcoding

@victorchrollo14
Copy link
Contributor Author

hey @kof, seems like the same issue is present in marketplace image sections in page settings.

shall I fix that as well and push it to this PR.
image

@kof
Copy link
Member

kof commented Apr 8, 2025

Yes please!

@victorchrollo14
Copy link
Contributor Author

Yes please!

Hey @kof, sorry for the confusion. the same ImageInfo component is used in both the places, so this pr fixes overflow in both of these components. I was on the main branch earlier so got confused.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Social image overflows in page settings
2 participants