From 56603be2f9297d9de39c84b770af3eb60faa264d Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Mon, 20 Dec 2021 09:40:24 -0300
Subject: [PATCH] Decrease --header-height by 20%

---
 ui/component/fileRenderFloating/view.jsx | 7 +++++--
 ui/scss/component/_wunderbar.scss        | 2 +-
 ui/scss/component/menu-button.scss       | 2 +-
 ui/scss/init/_vars.scss                  | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index cb7f3d0f2..1154f68b1 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -18,6 +18,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';
@@ -339,8 +343,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),
               }
             : {}
         }
diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index 0645b6de7..191cb745d 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/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;
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index e0ed00753..93745c1fc 100644
--- a/ui/scss/component/menu-button.scss
+++ b/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 {
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index cc93ff789..d1f87ffa7 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -66,7 +66,7 @@
   // 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) * 4);