From 03e5548f61a84f7f61b325d6484216092937d802 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 8 Apr 2024 21:20:27 -0700
Subject: [PATCH] feat: vis on top

---
 frontend/src/lib/Header.svelte     | 25 ++++++++++++-------------
 frontend/src/lib/Molstar.svelte    |  2 +-
 frontend/src/routes/Align.svelte   |  2 +-
 frontend/src/routes/Protein.svelte |  2 +-
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/Header.svelte b/frontend/src/lib/Header.svelte
index a869b4c5..f4e641ea 100644
--- a/frontend/src/lib/Header.svelte
+++ b/frontend/src/lib/Header.svelte
@@ -8,14 +8,14 @@
 		TableRowOutline,
 		BookOutline,
 	} from "flowbite-svelte-icons";
-	import {user} from "./stores/user"
-	import Cookies from "js-cookie"
+	import { user } from "./stores/user";
+	import Cookies from "js-cookie";
 
 	// Checking if the user has a cookie.
 	// If they do, set user status for the whole site.
 	onMount(async () => {
 		if (Cookies.get("auth")) {
-			$user.loggedIn = true
+			$user.loggedIn = true;
 		}
 	});
 </script>
@@ -32,9 +32,9 @@
 				><TableRowOutline size="lg" />Search</a
 			>
 			{#if $user.loggedIn}
-			<a href="/upload" class="flex items-center gap-1">
-				<UploadOutline size="lg" />Upload</a
-			>
+				<a href="/upload" class="flex items-center gap-1">
+					<UploadOutline size="lg" />Upload</a
+				>
 			{/if}
 			<a href="/tutorials" class="flex items-center gap-1">
 				<BookOutline size="lg" />Tutorials</a
@@ -44,13 +44,12 @@
 
 	<a href="/login" class="flex items-center gap-1 mr-5">
 		<UserOutline size="lg" />
-			{#if $user.loggedIn}
-				Logout
-			{:else}
-				Login
-			{/if}
-		</a
-	>
+		{#if $user.loggedIn}
+			Logout
+		{:else}
+			Login
+		{/if}
+	</a>
 </header>
 <div style="height: 60px;" />
 
diff --git a/frontend/src/lib/Molstar.svelte b/frontend/src/lib/Molstar.svelte
index b8890553..53beb6e2 100644
--- a/frontend/src/lib/Molstar.svelte
+++ b/frontend/src/lib/Molstar.svelte
@@ -62,6 +62,6 @@
 	#myViewer {
 		float: left;
 		position: relative;
-		z-index: 997;
+		z-index: 999;
 	}
 </style>
diff --git a/frontend/src/routes/Align.svelte b/frontend/src/routes/Align.svelte
index 58eebe7d..005d48ff 100644
--- a/frontend/src/routes/Align.svelte
+++ b/frontend/src/routes/Align.svelte
@@ -67,7 +67,7 @@
 					>
 				</div>
 			</div>
-			<div>
+			<div class="z-999">
 				<Molstar
 					format="pdb"
 					url="{BACKEND_URL}/protein/pdb/{combined}"
diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index 687657d0..3b7276c9 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -119,7 +119,7 @@
 				{/if}
 			</div>
 
-			<div style="position: sticky; top: 55px; right: 0;">
+			<div style="position: sticky; top: 55px; right: 0; z-index:999;">
 				<EntryCard title="Provided Information">
 					<Molstar
 						format="pdb"