[Integrations] Terraform logo is skewed

[eeshaanSA]

Description

Page Link:

Expected Behavior

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[Lonecloud7]

Can I get a link to the page with this issue?

[GaganpreetKaurKalsi]

Can I get a link to the page with this issue?

Sure! Here it is, link. Terraform is the 4th last among the integrations.

[tinniaru3005]

Hey @GaganpreetKaurKalsi @eeshaanSA, I can solve it. Can you please assign it to me?

[eeshaanSA]

I am not sure if @Lonecloud7 is working on it already. @Lonecloud7 are you?

[Lonecloud7]

I am not sure if @Lonecloud7 is working on it already. @Lonecloud7 are you?

No, I'm currently not working on it

[eeshaanSA]

Here you go, @tinniaru3005

[tinniaru3005]

@leecalcote I guess we can close this issue also

[eeshaanSA]

@tinniaru3005 thanks for the confirmation.

[leecalcote]

Oh, my goodness! I just looked back at the screenshot above. 😵‍💫 Yes, it is skewed. 😆

Adjusting padding isn't ideal, though. Please confirm that only height or only width is specify for the logos. The aspect ratio will be retained in this situation. Changing padding like proposed will affect all logos.

[eeshaanSA]

@leecalcote , right now on the site it isn't. It looks just fine. 😵‍💫😵‍💫

[leecalcote]

Uh-oh. Is a media query causing us confusion?

[eeshaanSA]

I doubt, looks fine for mobile, tablet, desktop 😵‍💫

[eeshaanSA]

Did someone maybe fix this in another PR? @leecalcote

[leecalcote]

Gosh, I can’t repro either.

[eeshaanSA]

Guess what, @leecalcote, OS: Linux(Ubuntu) Browser : Chrome Spooky 👻

[leecalcote]

Ha! You found the magic combination. Wow, isn't that odd to think how / why OS matters?

[GaganpreetKaurKalsi]

I can 👀 the skewed terraform logo. OS: MacOS Browser: Chrome

[GaganpreetKaurKalsi]

All integration images are at height 100%. Removing height: 100% from img tag solves the issue.

[eeshaanSA]

Ha! You found the magic combination. Wow, isn't that odd to think how / why OS matters?

Heard of browser specific issues, but this is OS specific. How?

[eeshaanSA]

All integration images are at height 100%. Removing height: 100% from img tag solves the issue.

Yup, that will solve the problem for all integration icons, because there can be different logos skewed for different OS/browser combos.

[leecalcote]

@tinniaru3005 ^^

[leecalcote]

Apparently, size matters.

🤭

[eeshaanSA]

Apparently, size matters.

🤭

😳

[tinniaru3005]

@tinniaru3005 ^^

Ya @leecalcote I looking into it.

[tinniaru3005]

Hey @leecalcote the logo looks fine now. Is the issue fixed? But there is another issue. If I am hovering on the logo image then the whole name is not showing if the name is a bit long. Example: KubeEdge, Terraform some letters are getting cut out from both the ends.

[Sajiyah-Salat]

Hey @tinniaru3005 I don't think the issue is fixed as I can see skewed Terraform logo. OS: Ubuntu browser: Firefox

[GaganpreetKaurKalsi]

Closing this issue. Fixed in #3582