From 5158bfd06a22150f4351ccdd2015689258f1ec5b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 16 May 2021 20:59:03 +0530
Subject: [PATCH] Tab titles

---
 src/lib/History/index.svelte | 4 +++-
 src/lib/Tabs/index.svelte    | 2 ++
 src/routes/edit.svelte       | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/History/index.svelte b/src/lib/History/index.svelte
index 53abed51..e11b3fe7 100644
--- a/src/lib/History/index.svelte
+++ b/src/lib/History/index.svelte
@@ -64,7 +64,9 @@
 
 <Card class="h-64">
 	<div slot="title" class="flex">
-		<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
+		<div class="flex">
+			<Tabs on:select={tabSelectHandler} {tabs} title="History" />
+		</div>
 		<div class="flex-grow" />
 		<div class="flex gap-x-4 text-white">
 			<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
diff --git a/src/lib/Tabs/index.svelte b/src/lib/Tabs/index.svelte
index 4b6e540f..683cbc5f 100644
--- a/src/lib/Tabs/index.svelte
+++ b/src/lib/Tabs/index.svelte
@@ -3,6 +3,7 @@
 
 	export let tabs: Tab[] = [];
 	export let activeTabID: string = tabs[0].id;
+	export let title: string;
 	const dispatch = createEventDispatcher<TabEvents>();
 	const toggleTabs = (tab: Tab) => {
 		activeTabID = tab.id;
@@ -10,6 +11,7 @@
 	};
 </script>
 
+<span class="text-white mr-2">{title}</span>
 <ul class="flex list-none flex-wrap flex-row">
 	{#each tabs as tab}
 		<li class="mr-2 last:mr-0 flex-auto text-center">
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index b20137da..b336f8c6 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -107,7 +107,7 @@
 		<div class="w-2/5 flex flex-col">
 			<Card class="flex-1">
 				<div slot="title" class="flex">
-					<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
+					<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} title="Mermaid" /></div>
 					<div class="flex-grow" />
 					<div class="flex gap-x-4 text-white">
 						{#if !$codeStore.autoSync}
@@ -123,7 +123,7 @@
 				</div>
 
 				<div class="h-full flex-grow flex flex-col">
-					<div class="flex-grow" style="position: relative;">
+					<div class="flex-1">
 						<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
 					</div>
 				</div>