Activities v2: Boost rotator improvements

## Goal

Address the following UX concerns with respect the Boost Rotator in the context of the new activity post designs.

1. The social interactions at the bottom of the rotator get pushed outside the confines of the boost rotator when posts are lengthy.
2. The presentation of the post content within the boost rotator is oftentimes poorly presented.
3. The navigation controls (more left/right) are perceived to be lost/unclear


## What needs to be done

- [ ] Address the above three issues as indicated in the UX/Design heading 

### Other bugs that should be research / resolved as part of this issue MAKE NEW TASKS PLEASE

- [ ] The rotator shows horizontal scroll bars for quote posts
- [ ] Videos don't autoplay within the boost rotator
- [ ] When just a youtube link is contained within the post, the video embed does not appear. Just the link is displayed.

## QA

<!---
Consideration is given to how the issue will be demoed and tested prior to being deployed
--->


## UX/Design

1. [New Boost Rotator Header](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=707%3A3838)
  * Larger clearer boost rotator header with its own BG colour.
  * Larger nav controls moved to the RHS
2. [Social Interactions](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=818%3A3769)
  * Social interaction should remain in a fixed position at the bottom on the boost rotator.
  * The length height of the boosted post should not impact upon the position of the social interactions.
  * Where content overruns a slight gradient fadeout appears as indicated in the above design link.
  * Clicking `See More` will navigate the user to the post page
3. [Revised content positioning](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=808%3A3662)
  * Content should be positioned in the middle of the available area between the post header and social interactions.
  * Where there is text with an embed (URL, Image, Video) the [associated text should sit alongside the embed](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=808%3A3725).
  * See below numerous design examples which should clarify this.
    * [Text and image not overflowing](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=707%3A3838)
    * [Text and image overflowing](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=818%3A3769)
    * [Short text](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=818%3A3808)
    * [Text and large URL embed](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=818%3A3846)
    * [Text and small URL embed](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=818%3A3890)
    * [Quote Post](https://www.figma.com/file/oYPYya9Z4G5wqgLvdKDbOB/Activity-Post-revised-%5BWeb%5D?node-id=818%3A3934)


## Personas

<!---
Who does this user impact and why (optional)
--->


## Experiments

<!---
Experiments are not required, but it should be made clear if one is expected. If experiments are required, the hypothesis should be outlined.
--->


## Acceptance Criteria

- [ ] Social interactions should never be positioned out of place
- [ ] The positioning of the boosted content should conform with the designs indicated above.
- [ ] Boosted videos should autoplay
- [ ] Resolve horizontal scroll bar issue for quite posts

## Definition of Ready Checklist

- [ ] Definition Of Done (DoD)
- [ ] Acceptance criteria
- [ ] Weighted
- [ ] QA
- [ ] UX/Design
- [ ] Personas
- [ ] Experiments



<details><summary>Original Issue by @markryansallee </summary>


### Summary

<!---
Please read this!

The Definition of Ready (DoR) can be found at https://developers.minds.com/docs/handbook/how-we-work/#definition-of-ready-dor

Before opening a new issue, make sure to search for keywords in the issues
filtered by the "Type::Feature" label and verify the feature you're about to submit isn't a duplicate.
--->

## Goal

Cleaning up a few issues with the v2 Boost rotator to unblock the production experiment of Activities v2.

## What needs to be done

Issues with Boosts blocking the launch of the experiment:

- Visual of the "Boosted Post" label + arrow button controls at the top of the rotator
- The rotator doesn't deal well with boosted posts that are very tall. Some screenshots below as examples.
- The rotator shows horizontal scroll bars for quote posts
- Videos don't autoplay

### Steps to reproduce

(How one can reproduce the issue - this is very important)

### Platform information 

- Windows + Chrome
- MacOS + Chrome

### What is the current *bug* behavior?

(What actually happens)

### What is the expected *correct* behavior?

(What you should see instead)

### Relevant logs and/or screenshots

<details><summary>Examples of tall posts getting cut off</summary>

![image](/uploads/cf9642d3d23cf792b40c394146295c42/image.png)

- Bottom of the engagement bar is cut off.

![image](/uploads/46d9b9ce1fba7d5c66faafacaf9e483d/image.png)

![image](/uploads/771c788e3e5784779ea4fe4dcbeaa0a0/image.png)

- Media is cut off, no engagement bar appears
</details>

</details>

Story points: 5.0