Not a super related change, but as I was testing the responsiveness of the feature modal, I tested what would happen if I had a very long feature name. There was some weirdness with the UI; however, these two additions fixes that and now the modal matches the design perfectly:

Design:

Before:

After:

As I was doing more tests about the responsiveness of the modal

I thought about this too, but then CompetitorFeature will need extra logic to determine if we should access the competitorDescriptionShort field or the competitorDescriptionLong for the competitorDescription and the same thing for commDescription. I thought that it would be more elegant to pass down the props this way, so that we can avoid that extra logic but let me know if you still disagree

This color was missing from the landing page color design system. I updated the design system to include this color so that everything is still in sync

I believe @kuba has been implementing two modal overlay colors recently on web. Would be good to make sure our practices are in sync between web / landing. On web, we have this:

--modal-overlay-background-90: rgba(0, 0, 0, 0.9);
--modal-overlay-background-80: rgba(0, 0, 0, 0.8);

Not sure why we're using black-with-opacity on web, versus almost-black-with-opacity on landing. Wonder if we could replace #010101bf with one of the colors we're using on web, but I guess it's not super important given that landing has its own distinct design system.

cc @ted