Layer5: [NG] Overlapping text in interactive lab cards on Learn page

[leecalcote]

Description
The https://layer5ng.netlify.app/learn page has overlapping text in interactive lab cards.

Expected Behavior
The "Learn how to do..." row should remain on one line and truncate with a trailing "...".

Screenshots

---

Contributor Resources
The layer5 repo contains two websites. The current generation and the next-generation of the layer5.io site.

If the layer5-ng label is absent on this issue, then this issue pertains to the current generation of the layer5.io website, which uses Jekyll and GitHub Pages. Site content is found under the master branch.

• See layer5 contributing instructions

If the layer5-ng label is present on this issue, then this issue pertains to the next-generation of the layer5.io website, which uses Gatsby, Strapi, and GitHub Pages. Site content is found under the layer5-ng branch.

• See layer5-ng contributing instructions

[EmperorYP7]

I'd be glad to work on this. May I go ahead?

[Nikhil-Ladha]

@EmperorYP7 actually I have some WIP for this page, so I will be taking this one. You can take some of the other open issues 🙂

[leecalcote]

@EmperorYP7 there are plenty more where this comes from, though. Let me know if you don't find one... that just means that they haven't been written up, yet.

[EmperorYP7]

@Nikhil-Ladha No problem 😄

[EmperorYP7]

@leecalcote only if they ain't WIP by someone else. I'll stick around for a while to find one. Thanks!

[Nikhil-Ladha]

@Jashpatel1 can you confirm if the issue is still present for you?
I have checked in my system and it works fine for all views.