Updates width of content library channel cards with no description to…

[LianaHarris360]

… fill horizontal space

Summary

Description of the change(s) you made

This PR adds a channel-card class to the list of channels under content-library and sets the display to inline-block and the min-width to 100%. Previously, channels without descriptions did not completely fill the horizontal space.

Manual verification steps performed

1. Edited published channel and took away description
2. Opened Content library page where published channel will appear
3. Verified that the channel width filled the horizontal space

Screenshots (if applicable)

Channel card layout without description:

Channel card layout with description:

Channel card layout without description after changes:

On smaller screen:

---

Reviewer guidance

How can a reviewer test these changes?

1. Open local studio with changes from this branch.
2. Check if a published channel has a description, if so, edit out the description.
3. Open the Content library page where the published channel will appear.
4. Verify if the channel width fills the horizontal space.

References

Fixes issue #3387

Comments

---

Contributor's Checklist

PR process:

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[bjester]

The layout changes when you click the link to select channels for download, which adds checkboxes to each channel item row, and that causes them to overflow out of the viewport with the 100% width fix. This is using flexbox so that's an option here. Let me know if you'd like more info on that.

Before	After