Bug 1815698 - Allow sponsored stories details to be spaced evenly vertically

[Alexandru2909]

Added SpaceEvenly arrangement to sponsored stories details to avoid having publisher text cut-off for normal fonts on some devices.

https://user-images.githubusercontent.com/35462038/217870656-c837af13-8c80-4b1e-8a72-045fa6d8dafc.mp4

Pull Request checklist

• [ ] Tests: This PR includes thorough tests or an explanation of why it does not
• [x] Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not
• [ ] Accessibility: The code in this PR follows accessibility best practices or does not include any user facing features. In addition, it includes a screenshot of a successful accessibility scan to ensure no new defects are added to the product.

QA

• [x] QA Needed

To download an APK when reviewing a PR (after all CI tasks finished running):

1. Click on Checks at the top of the PR page.
2. Click on the firefoxci-taskcluster group on the left to expand all tasks.
3. Click on the build-debug task.
4. Click on View task in Taskcluster in the new DETAILS section.
5. The APK links should be on the right side of the screen, named for each CPU architecture.

GitHub Automation

Used by GitHub Actions.

[Alexandru2909]

I am approving this since it's soft freeze today. We have already started a discussion around the UX comment I had.

The proposed topic is around whether or not UX wants to persist the proportions within the element when it comes content sizes as a result of situation such as bigger text sizes. If so, then this will challenge how we have been using a fixed height for the container for most of our composables. Instead, we would want the container to wrap the contents.

Put another way, we're wondering if UX expects the proportions of the elements within the container to be maintained. In the screenshot, you will see that we’re using a fixed height container, but situations where the user uses bigger text, then the text content will need to be laid out more dynamically to accommodate the space it has to work with. Alternatively, the container size should be dynamic and just wrap elements within it while maintaining the expected paddings between all of the elements

Using dynamic height for the Pocket stories (Preview) compared to fixed height prior to landing this PR (Nightly)

https://user-images.githubusercontent.com/35462038/218117476-52d55b64-689c-47f3-824d-25ae55f6eec1.mp4

[Mugurell]

Thank you for the above video. Make sense that if we remove the hardcoded height than one item can be bigger than the others or many items can have different heights and then we end up with a staggered grid which seems like a worse result to me.