ui/component/fileRenderFloating/view.jsx

@@ -17,6 +17,10 @@ import { useHistory } from 'react-router';
 import { isURIEqual } from 'util/lbryURI';
 import AutoplayCountdown from 'component/autoplayCountdown';
 
+// scss/init/vars.scss
+// --header-height
+const HEADER_HEIGHT = 64;
+
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
 export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
@@ -351,8 +355,7 @@ export default function FileRenderFloating(props: Props) {
                 width: fileViewerRect.width,
                 height: fileViewerRect.height,
                 left: fileViewerRect.x,
-                // 80px is header height in scss/init/vars.scss
-                top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0),
+                top: fileViewerRect.windowOffset + fileViewerRect.top - HEADER_HEIGHT - (IS_DESKTOP_MAC ? 24 : 0),
               }
             : {}
         }

ui/scss/component/_wunderbar.scss

@@ -103,7 +103,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  top: calc(var(--header-height) - (var(--height-input)) + 3px);
+  top: calc(var(--header-height) - var(--spacing-m) - 3px);
   @extend .card;
   box-shadow: var(--card-box-shadow);
   border-top-right-radius: 0;

ui/scss/component/menu-button.scss

@@ -86,7 +86,7 @@
 
 .menu__list--header {
   @extend .menu__list;
-  margin-top: 19px;
+  margin-top: var(--spacing-s);
 }
 
 .menu__list--comments {

ui/scss/init/_vars.scss

@@ -72,7 +72,7 @@ $breakpoint-large: 1600px;
   // Header
   // This is tied to the floating player so it knows where to attach to
   // ui/component/fileRenderFloating/view.jsx
-  --header-height: 80px;
+  --header-height: 64px;
 
   // Inline Player
   --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);