From 5182a9ae1ad59415192e15549a1364ee7d07b79f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 27 Dec 2021 16:22:01 +0100
Subject: [PATCH] Fix spinner overlapping the global navigation

---
 src/dashboardWebView/components/Header/Header.tsx | 4 ++--
 src/dashboardWebView/components/Spinner.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index c480b25f..8afbb253 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -55,8 +55,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
   return (
     <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
 
-      <div className="mb-0 border-b bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300">
-        <ul className="flex items-center justify-start -mb-px" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+      <div className="mb-0 border-b bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300 h-12">
+        <ul className="flex items-center justify-start h-full -mb-px" data-tabs-toggle="#myTabContent" role="tablist">
           <li className="mr-2" role="presentation">
             <button className={`flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300  dark:hover:text-gray-300 ${view === NavigationType.Contents ? "border-vulcan-500 text-vulcan-500  dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} type="button" role="tab" aria-controls="profile" aria-selected="false" onClick={() => updateView(NavigationType.Contents)}>
               <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
diff --git a/src/dashboardWebView/components/Spinner.tsx b/src/dashboardWebView/components/Spinner.tsx
index de8e7cdf..18432177 100644
--- a/src/dashboardWebView/components/Spinner.tsx
+++ b/src/dashboardWebView/components/Spinner.tsx
@@ -4,7 +4,7 @@ export interface ISpinnerProps {}
 
 export const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
   return (
-    <div className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}>
+    <div className={`fixed top-12 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}>
       <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-50 h-32 w-32" />
     </div>
   );