Fix margin on microsurvey emojis and comment label alignment

[jakubjanczyk]

Problem/Feature

This PR fixes the margin on Messages microsurvey emojis (faces and thumbs). Previously there was unnecessary left padding. Other thing is label text alignment to the center on microsurvey comment textarea.

See related PR comment: https://github.com/helpscout/hs-app-ui/pull/527#issuecomment-1167832054

To test it, open MessageCard in storybook and then With Thumbs survey and With Faces survey to see it looks ok now :)

Guidelines

Make sure the pull request:

• [ ] Follows the established folder/file structure
• [ ] Adds unit tests
• [ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
• [ ] Did you verify some accessibility (a11y) basics?
• [ ] Adds/updates stories. Guidelines
• [ ] Adds/updates documentation (ie proptypes) Guidelines
• [ ] Has it been tested in Help Scout's supported browsers?
• [ ] Requests review from designer of the feature
• [ ] Add label (bug? feature?)

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	2916c03
Status:	✅  Deploy successful!
Preview URL:	https://3746108a.hsds-react.pages.dev
Branch Preview URL:	https://microsurveys-improvements.hsds-react.pages.dev

View logs