Tab titles

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()}

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">

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>