fix(FEC-11393): unmute button are cut off when not on hover/there's n…

…o top bar (#620)

When we hide the top bar we put margin-top -60px on it. But if the top bar is empty its height is just 16px and therefore the top bar is moved too high and the interactive area is starting too high also.
The fix is to enforce that when the top is hidden it will be exactly 60px.
I also removed the 16px margin in the children when empty and now it is handled by min-height: 16px
I also fixed some issue caused by css ranking in sm size

src/components/top-bar/_top-bar.scss

@@ -6,8 +6,11 @@
   visibility: hidden;
   position: relative;
   height: auto;
+  min-height: #{$top-bar-max-height}px;
+  max-height: #{$top-bar-max-height}px;
   margin-top: #{-$top-bar-max-height}px;
-  transition: #{$hover-animation-time}ms visibility ease-in-out, #{$hover-animation-time}ms margin-top ease-in-out;
+  transition: #{$hover-animation-time}ms visibility ease-in-out, #{$hover-animation-time}ms margin-top ease-in-out,
+    #{$hover-animation-time}ms min-height ease-in-out;
   width: 100%;
   top: 0;
   left: 0;
@@ -22,7 +25,7 @@
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
     pointer-events: none;
     &:empty {
-      margin: 0 0 #{$gui-gutter}px 0;
+      margin: 0;
       height: 0;
       width: 0;
     }
@@ -41,7 +44,7 @@
     margin: #{$top-bar-top-bottom-gutter}px 0 #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
     pointer-events: none;
     &:empty {
-      margin: 0 0 #{$gui-gutter}px 0;
+      margin: 0;
     }
   }
   .right-controls {
@@ -50,7 +53,7 @@
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px #{$top-bar-top-bottom-gutter}px 0;
     pointer-events: none;
     &:empty {
-      margin: 0 0 #{$gui-gutter}px 0;
+      margin: 0;
     }
 
     .control-button-container {
@@ -73,6 +76,7 @@
     .top-bar {
       visibility: visible;
       margin-top: 0;
+      min-height: #{$gui-gutter}px;
     }
   }
 }
@@ -90,17 +94,24 @@
 }
 
 .player.size-sm .top-bar {
-  padding: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
-
   .left-controls {
     margin: #{$top-bar-top-bottom-gutter}px 0 #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
+    &:empty {
+      margin: 0;
+    }
   }
 
   .right-controls {
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px #{$top-bar-top-bottom-gutter}px 0;
+    &:empty {
+      margin: 0;
+    }
   }
   .top-bar-area {
     width: calc(100% - #{2 * $gui-small-gutter}px);
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
+    &:empty {
+      margin: 0;
+    }
   }
 }