fix: toolbar icons hover spacing

[storyworks]

Description

Issue

Toolbar icon hover backgrounds are squashed, icon spacing is off and toolbar overflows on tablet view

Solution

Adjusted padding and gaps between icons, display mobile toolbar at mdUp breakpoints

Additional information

See linear ticket as I've removed some lines that were included in previous fixes. Need to ensure they still work, I wasn't sure how to reproduce the issues to test myself.

[linear[bot]]

ENG-636 Make the three-dot hover state the same as we have for other icons on the top panel

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 80.17%. Comparing base (c5fcbcf) to head (4ab4dac).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #3684 +/- ## =========================================== + Coverage 63.06% 80.17% +17.10% =========================================== Files 127 639 +512 Lines 1278 10023 +8745 Branches 132 1314 +1182 =========================================== + Hits 806 8036 +7230 - Misses 434 1833 +1399 - Partials 38 154 +116 ``` | [Flag](https://app.codecov.io/gh/JesusFilm/core/pull/3684/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | Coverage Δ | | |---|---|---| | [apps.journeys-admin](https://app.codecov.io/gh/JesusFilm/core/pull/3684/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `80.17% <100.00%> (?)` | | | [apps.watch](https://app.codecov.io/gh/JesusFilm/core/pull/3684/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm) | `?` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=JesusFilm#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[github-actions[bot]]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Thu Oct 17 20:33:26 NZDT 2024