Fixes design issues in metadata panel

[ravi-kumar-pilla]

Description

Resolves #1827

Development notes

• Made changes to styles based on the comments in Metadata panel design fixes #1827
• Updated Expand Preview text to be consistent for different dataset types

QA notes

• Verify fixes using a screen ruler or box model
• All tests should pass

NOTE: Lint issue will be resolved once #2029 is merged

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[jitu5]

LGTM!

[stephkaiser]

thank you Ravi! it's looking great, some design QA comments from me:

1. can we have lower-case 'p' for 'Expand preview' button
2. the top padding for the metadata panel looks to be 40px, can we change this to 32px?

3. 'Show Code' toggle still seems to be slightly lower than the label, it should be positioned in the center of the label

4. the scrolling functionality works great! however i've noticed for data tables, when scrolling to the right the gradient is 'stuck' on the table and does not stay on the right of the preview area, see screenshot below:

5. the 'Copied!' tooltip that appears when the run command copy button is clicked is not aligned with the copy button anymore, can we update this as well?

6. could we also add more space in the bottom padding for the title? (32px below, same as top padding) Currently when scrolling content it looks like this:

let me know if there are any questions, thank you!!

[ravi-kumar-pilla]

thank you Ravi! it's looking great, some design QA comments from me:

Hi Steph,
Thanks for the review. I fixed the review comments. Please review and let me know if there are any issues.

[Huongg]

thanks for the changes, LGTM 👍

[stephkaiser]

Hi Steph, Thanks for the review. I fixed the review comments. Please review and let me know if there are any issues.

Thanks Ravi, all the design QA comments above looks fixed now, well done!

I've unfortunately found more though, im sorry about that!

1. the left and right padding looks good for the text components but if you look at the screenshot below, it seems like the X button and the copy button isn't aligned with the padding

2. I just noticed that the plotly previews still have the old button ("collapse plotly visualisation") which we removed a while ago, we only have the back button now in the top left corner

3. the padding between the title and the 'Show code' toggle should also be 32px

I hope these are the last changes! sorry and thank you :)