Small spacing fixes on small screens

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss

@@ -260,17 +260,24 @@
 
 .fretonator__playCta {
   @include font_bodyCopy();
-  font-size: pxToRem(14);
+  font-size: pxToRem(12);
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: pxToRem($grid-unit * 4);
   color: var(--grey);
+  line-height: 1;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media screen and (min-width: $screen-sm) {
+    font-size: pxToRem(14);
+  }
 }
 
 .fretonator__playCtaIcon {
   display: flex;
-  height: pxToRem($grid-unit * 3);
-  width: pxToRem($grid-unit * 3);
+  height: pxToRem($grid-unit * 2);
+  width: pxToRem($grid-unit * 2);
   margin-right: pxToRem($grid-unit);
 }

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss

@@ -165,7 +165,7 @@
 
 .infoHighlight {
   border-radius: var(--border-radius-chip);
-  padding: pxToRem($grid-unit / 4) pxToRem($grid-unit * 2);
+  padding: pxToRem($grid-unit / 4) pxToRem(9);
   color: var(--black);
   background-color: var(--peach);
 }