From 4a95b862188d3c2d72ced9c2b297f716ede724cd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 20 May 2023 12:52:04 +0200
Subject: [PATCH] UX nits

---
 .../lib/components/sidebar/UserMenu.svelte    |  2 +-
 .../components/sidebar/WorkspaceMenu.svelte   | 38 +++++++++----------
 .../(root)/(logged)/folders/+page.svelte      |  2 +-
 .../(root)/(logged)/groups/+page.svelte       |  2 +-
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index c2ad9d8efb..d4246f48fb 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -89,7 +89,7 @@
 						switchWorkspace('admins')
 						close()
 					}}
-					class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+					class="text-gray-700 block px-4 py-2 font-normal text-sm hover:bg-gray-100 hover:text-gray-900"
 					role="menuitem"
 					tabindex="-1"
 				>
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index 4dee68cdcb..2fee52edd6 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -29,28 +29,26 @@
 
 	<div class="divide-y divide-gray-100" role="none">
 		<div class="py-1">
-			<table class="w-full">
-				{#each $userWorkspaces as workspace}
-					<tr
-						class="text-xs
+			{#each $userWorkspaces as workspace}
+				<button
+					class="text-xs min-w-0 w-full flex flex-col py-1.5
 						{$workspaceStore === workspace.id
-							? 'cursor-default bg-blue-50'
-							: 'cursor-pointer hover:bg-gray-100'}"
-						on:click={() => {
-							if ($workspaceStore === workspace.id) {
-								return
-							}
-							switchWorkspace(workspace.id)
-							close()
-						}}
+						? 'cursor-default bg-blue-50'
+						: 'cursor-pointer hover:bg-gray-100'}"
+					on:click={() => {
+						if ($workspaceStore === workspace.id) {
+							return
+						}
+						switchWorkspace(workspace.id)
+						close()
+					}}
+				>
+					<div class="text-gray-700 pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
+					<div class="text-gray-400 font-mono pl-4 text-2xs whitespace-nowrap truncate text-left"
+						>{workspace.id}</div
 					>
-						<td class="text-gray-500 font-mono pl-4 pr-1 py-2 text-xs whitespace-nowrap"
-							>{workspace.id}</td
-						>
-						<td class="text-gray-700 pr-4 py-2 w-full">{workspace.name}</td>
-					</tr>
-				{/each}
-			</table>
+				</button>
+			{/each}
 		</div>
 		<div class="py-1" role="none">
 			<a
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 3c18824bf6..4326f17a07 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -94,7 +94,7 @@
 		</div>
 	</PageHeader>
 
-	<div class="relative mb-20">
+	<div class="relative mb-20 pt-8">
 		<TableCustom>
 			<tr slot="header-row">
 				<th class="!px-0" />
diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
index 45e58171d8..6809529784 100644
--- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
@@ -79,7 +79,7 @@
 		</div>
 	</PageHeader>
 
-	<div class="relative mb-20">
+	<div class="relative mb-20 pt-8">
 		<TableCustom>
 			<tr slot="header-row">
 				<th class="!px-0" />