rh-tabs on mobile tab/content padding

[brianferry]

TL;DR: 

- `rh-tabs` on mobile doesn't show enough content. 
- We could lower the padding on the tabs and the content inside the `rh-tab-panel` to show more content on mobile.  
- This could be in tandem with the vertical layout updates we are looking at for tabs on mobile as well.

In the Trial Center we are looking at moving from pfe-content-set to rh-tabs. The shift locally was quick but we are running into some design considerations now that I wanted to bring up as a possible add-on for our Vertical Tabs Story

When we are on mobile with rh-tabs inside of the PTC, we see the following:

Note that the icons aren't loading currently due to a local issue unrelated to this.

The problem we're running into here is that the mobile tabs don't show enough of the content that is available when on a smaller screen / mobile.

The padding on the buttons and the tabs are pretty wide though I'm not 100% on the accessibility considerations we would have to make in order to make those smaller. This screenshot is also taken from our local environment which does not currently copy the 16px padding around the content we would see on the live site.

Discussing with @zeroedin we had the idea of maybe having compact stylings or something in that line of thinking where once we hit a certain threshold screen size wise we could lower the padding to show more of the content / tabs.

This could be in tandem with the vertical layout updates we are looking at for tabs on mobile as well.

Thoughts?

@coreyvickery @marionnegp @nikkimk @markcaron

[zeroedin]

From this conversation, upstream we have since implemented changes to the scoll calculation and behavior. As well as looking at changes to the padding of scroll buttons in RHDS