Merge pull request #1013 from alexpelan/alexpelan/hamburger-tweak

Fix unecessary ugly scrollbar in hamburger menu

Author: outoftime

src/components/TopBar/HamburgerMenu.jsx

@@ -56,19 +56,19 @@ const HamburgerMenu = createMenu({
           key="social"
         >
           <a
-            className="u__icon"
+            className="u__icon top-bar__menu-item-icon"
             href="https://github.com/popcodeorg/popcode"
             rel="noopener noreferrer"
             target="_blank"
           >&#xf09b;</a>
           <a
-            className="u__icon"
+            className="u__icon top-bar__menu-item-icon"
             href="https://twitter.com/popcodeorg"
             rel="noopener noreferrer"
             target="_blank"
           >&#xf099;</a>
           <a
-            className="u__icon"
+            className="u__icon top-bar__menu-item-icon"
             href="https://slack.popcode.org/"
             rel="noopener noreferrer"
             target="_blank"

src/css/application.css

@@ -195,7 +195,7 @@ body {
   min-width: 100%;
   max-height: 50vh;
   max-width: 30em;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .top-bar__menu-item {
@@ -212,11 +212,14 @@ body {
 }
 
 .top-bar__menu-item_icons {
-  letter-spacing: 1.5em;
-  margin-right: -1.5em;
   text-align: center;
 }
 
+.top-bar__menu-item-icon {
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+}
+
 .top-bar__menu-item:hover,
 .top-bar__menu-item_active {
   background-color: var(--color-low-contrast-gray);