From 4c007ae3cb0ada398049bf75ea3d03ad62cce50c Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 6 Nov 2023 23:47:04 +0100
Subject: [PATCH] fix(frontend): add missing classes when tabs are in sidebar
 mode (#2577)

* fix(frontend): add missing class when tabs are in sidebar mode

* fix(frontend): fix class precedence
---
 .../apps/components/layout/AppTabs.svelte     | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 8ab1842c8b..09e4c65d9f 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -135,17 +135,35 @@
 		</div>
 	{:else if resolvedConfig.tabsKind == 'sidebar'}
 		<div
-			class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-surface text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
+			class={twMerge(
+				'flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-surface text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400',
+				css?.tabRow?.class,
+				'wm-tabs-tabRow'
+			)}
+			style={css?.tabRow?.style}
 		>
 			{#each tabs ?? [] as res}
 				<button
-					class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border-gray-300 border border-transparent hover:text-black px-1 py-2 {selected ==
-					res
-						? 'outline outline-gray-500 outline-1 bg-surface text-black'
-						: ''}"
 					on:pointerdown|stopPropagation
-					on:click={() => (selected = res)}>{res}</button
+					on:click={() => (selected = res)}
+					class={twMerge(
+						'rounded-sm !truncate text-sm hover:bg-gray-100 hover:border-gray-300 border border-transparent hover:text-black px-1 py-2',
+						css?.allTabs?.class,
+						'wm-tabs-alltabs',
+						selected == res
+							? twMerge(
+									'outline outline-gray-500 outline-1 bg-surface text-black',
+									css?.selectedTab?.class,
+									'wm-tabs-selectedTab'
+							  )
+							: ''
+					)}
+					style={selected == res
+						? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
+						: css?.allTabs?.style}
 				>
+					{res}
+				</button>
 			{/each}
 		</div>
 	{/if}