[Meshery] Integrations: Background shadow being cutoff

[leecalcote]

Description

The shadow behind the individual cells inside of the Integrations honeycomb is being cutoff. See the screenshot below:

Example page - https://layer5.io/cloud-native-management/meshery/integrations/cubefs Source code - https://github.com/layer5io/layer5/tree/master/src/sections/Meshery/Meshery-integrations

Expected Behavior

The shadow should be allowed to overflow and remain visible.

Environment:

• Host OS: macOS
• Browser: Safari

---

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

[sayan404]

I want to work in this issue please assign me this issue @leecalcote

[leecalcote]

Thanks, @sayan404. 👍

[TiwariAbhishek23]

My setup is also ready. If I can contribute then, please let me know.

[sayan404]

Unfortunately I cannot do this work now ... please assign this issue to someone else @leecalcote

[eeshaanSA]

updates? @AbhishekTiwari23

[TiwariAbhishek23]

updates? @AbhishekTiwari23

Hello @eeshaanSA, I mentioned on slack that I will be unavailable till Dec 15 because of my end-semester exams. I will be regular after 15. Thanks.

[gopivaibhav]

Hey @leecalcote @eeshaanSA I am a newbie to this organisation but I am willing to contribute. I have gone though the issue and found that ResponsiveHoneyComb needs to be changed (in styling) I am ready to take up this issue and explore more about it. Thanks !!

[leecalcote]

Sounds good, @gopivaibhav

[gopivaibhav]

Hi @leecalcote Since this issue was a bit old, this was an issue long back. I don't think there is some problem now as there are some commits made in this file to change tags to filter, styling cards, etc,. I checked it in my browser now and I can't see that shadow cutoff (I use Linux and Brave browser)

And I didn't check in the given environment i.e.

• Host OS: macOS
• Browser: Safari

If I want to check in the mentioned environment, then Can you please let me know how am I supposed to check?

[UtkarshMishra12]

@leecalcote ^^

[leecalcote]

yes, I can confirm that this issue still remains.

[randychilau]

Hi @leecalcote, @gopivaibhav

I am new to contributing, and thought I could assist @gopivaibhav on this open issue since I have the environment:

• Host OS: macOS
• Browser: Safari

In Safari, I was experiencing flicker/cutoff when hovering over the hexagons. Others reported related Safari issues and suggested adding -webkit-transform: translateZ(0) (MDN).

I gave it a try in the following file "layer5/src/sections/Meshery/Meshery-integrations/Integration.style.js"

.container-active,
  .container-inactive {
    -webkit-transform: translateZ(0);

and it seems to resolve the flicker/cutoff in Safari (flicker gif / with translateZ gif)

Hope this helps @gopivaibhav, cheers!

[leecalcote]

This is most helpful, @randychilau. I encourage you to push forward with a PR, if you would like.

Also, here is another issue to be aware of - https://github.com/layer5io/layer5/issues/3809. // @divz-codess

[randychilau]

Happy to be able to contribute, I will do a PR. Thanks!