Skip to content

[Individual-Integrations] Fix logo scaling and make the integrations page responsive #6579

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
Merged
merged 4 commits into from
Jun 30, 2025
Merged

[Individual-Integrations] Fix logo scaling and make the integrations page responsive #6579

merged 4 commits into from
Jun 30, 2025

Conversation

ShirshenduR
Copy link
Contributor

Description

This PR fixes #6578

Notes for Reviewers

Signed commits

  • Yes, I signed my commits.

@l5io
Copy link
Contributor

l5io commented Jun 28, 2025

🚀 Preview for commit 6499537 at: https://6860503b8482fc81713147c5--layer5.netlify.app

@vr-varad vr-varad requested a review from vishalvivekm June 29, 2025 07:43
@vishalvivekm
Copy link
Contributor

Thank you for working on this @ShirshenduR.

  • Did you find out what caused this?

vishalvivekm
vishalvivekm requested changes Jun 29, 2025
View reviewed changes
Copy link
Contributor

@vishalvivekm vishalvivekm left a comment

Choose a reason for hiding this comment

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

too many !important, let's avoid fixing the issue this way. Let's find out the source of the problem.

Please revert whitespaces changes not pertinent to the pr. turn off your formatters.

@l5io
Copy link
Contributor

l5io commented Jun 29, 2025

🚀 Preview for commit 227e222 at: https://68616b7e4215d215ccea656b--layer5.netlify.app

@ShirshenduR
Copy link
Contributor Author

@vishalvivekm The root cause for the issue is in the Image component image.js as The img tag has inline styles: [aspectRatio: "16/9"] which is forcing a 16:9 ratio on all logos

@ShirshenduR ShirshenduR requested a review from vishalvivekm June 29, 2025 17:35
@l5io
Copy link
Contributor

l5io commented Jun 29, 2025

🚀 Preview for commit a36f095 at: https://68617c1d066d25d632bf1c73--layer5.netlify.app

vishalvivekm
vishalvivekm requested changes Jun 29, 2025
View reviewed changes
Copy link
Contributor

@vishalvivekm vishalvivekm left a comment

Choose a reason for hiding this comment

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

@ShirshenduR Please revert extraneous commits / lint changes

@ShirshenduR ShirshenduR force-pushed the Fix#6578 branch 2 times, most recently from afc8521 to 6dabd37 Compare June 29, 2025 18:57
@ShirshenduR ShirshenduR requested a review from vishalvivekm June 29, 2025 19:01
@l5io
Copy link
Contributor

l5io commented Jun 29, 2025

🚀 Preview for commit 6dabd37 at: https://68618f785b00177464aeb5f4--layer5.netlify.app

@ShirshenduR
Fix layer5io#6578: responsive integrations
55c7688 
Fix layer5io#6578: bugfix: responsive integration logos

Signed-off-by: Shirshendu R Tripathi <shirsh8924@gmail.com>

Fix integration logo display and spacing issues

Signed-off-by: Shirshendu R Tripathi <shirsh8924@gmail.com>

Revert "Fix layer5io#6578: bugfix: responsive integration logos"

This reverts commit 36585f4.

Signed-off-by: Shirshendu R Tripathi <shirsh8924@gmail.com>
@l5io
Copy link
Contributor

l5io commented Jun 30, 2025

🚀 Preview for commit 55c7688 at: https://68622cf297cef8a8143a8ee0--layer5.netlify.app

@vr-varad
Copy link
Contributor

@ShirshenduR
Thank you for your contribution!
Let's discuss this during the website call today at 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

@vishalvivekm
Copy link
Contributor

@vishalvivekm The root cause for the issue is in the Image component image.js as The img tag has inline styles: [aspectRatio: "16/9"] which is forcing a 16:9 ratio on all logos

@KrishnaShuk

@ShirshenduR
Copy link
Contributor Author

@vishalvivekm The root cause for the issue is in the Image component image.js as The img tag has inline styles: [aspectRatio: "16/9"] which is forcing a 16:9 ratio on all logos

@KrishnaShuk

Please review the changes now @vishalvivekm

@vishalvivekm
Copy link
Contributor

Let's note that the fixed aspect ratio was added to help improve the CLS(Cumulative Layout Shift) score. However, since it's causing image distortion, we're reverting that.
The 300+ integration pages rarely experience layout shifts due to these integration icons, as they are small. That said, there may be other places where this might not be the case.

vishalvivekm
vishalvivekm reviewed Jun 30, 2025
View reviewed changes
vishalvivekm
vishalvivekm reviewed Jun 30, 2025
View reviewed changes
@vishalvivekm
add objectFit: contain to individual-integration's icons
1aebfa2 
Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
@vishalvivekm
revert fallback objectFit value
2e52097 
Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
@l5io
Copy link
Contributor

l5io commented Jun 30, 2025

🚀 Preview for commit 2e52097 at: https://6862cf76d2a3cd832aa27671--layer5.netlify.app

@vishalvivekm vishalvivekm merged commit 725ce9a into layer5io:master Jun 30, 2025
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vishalvivekm vishalvivekm vishalvivekm approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

responsive bug on integrations pages
4 participants
@ShirshenduR @l5io @vishalvivekm @vr-varad