refac: styling

src/lib/components/workspace/Documents.svelte

@@ -277,7 +277,7 @@
     </div>
 </div> -->
 
-<hr class=" dark:border-gray-700 my-2.5" />
+<hr class=" dark:border-gray-850 my-2.5" />
 
 {#if tags.length > 0}
 	<div class="px-2.5 pt-1 flex gap-1 flex-wrap">

src/lib/components/workspace/Modelfiles.svelte

@@ -103,7 +103,7 @@
 	</div>
 </a>
 
-<hr class=" dark:border-gray-700" />
+<hr class=" dark:border-gray-850" />
 
 <div class=" my-2 mb-5">
 	{#each $modelfiles as modelfile}

src/lib/components/workspace/Playground.svelte

@@ -400,7 +400,7 @@
 				</div>
 			</div>
 
-			<div class="pb-2">
+			<div class="pb-3">
 				{#if !loading}
 					<button
 						class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"

src/lib/components/workspace/Prompts.svelte

@@ -89,7 +89,7 @@
 		</a>
 	</div>
 </div>
-<hr class=" dark:border-gray-700 my-2.5" />
+<hr class=" dark:border-gray-850 my-2.5" />
 
 <div class="my-3 mb-5">
 	{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}

src/routes/(app)/workspace/+page.svelte

@@ -89,95 +89,83 @@
 	</title>
 </svelte:head>
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
-	<div class=" flex flex-col justify-between w-full overflow-y-auto">
-		<div class=" mx-auto w-full h-full">
-			<div class="w-full h-full">
-				<div class=" flex flex-col justify-center">
-					<div class=" px-4 pt-3 mb-1.5">
-						<div class=" flex items-center">
-							<div
-								class="{$showSidebar
-									? 'md:hidden'
-									: ''} mr-1 self-start flex flex-none items-center"
-							>
-								<button
-									id="sidebar-toggle-button"
-									class="cursor-pointer p-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
-									on:click={() => {
-										showSidebar.set(!$showSidebar);
-									}}
-								>
-									<div class=" m-auto self-center">
-										<MenuLines />
-									</div>
-								</button>
-							</div>
-							<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
-						</div>
+<div class=" flex flex-col w-full min-h-screen">
+	<div class=" px-4 pt-3 mb-1.5">
+		<div class=" flex items-center">
+			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
+				<button
+					id="sidebar-toggle-button"
+					class="cursor-pointer p-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+					on:click={() => {
+						showSidebar.set(!$showSidebar);
+					}}
+				>
+					<div class=" m-auto self-center">
+						<MenuLines />
 					</div>
-
-					<div class="px-4 mb-1">
-						<div
-							class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
-						>
-							<button
-								class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
-									? 'bg-gray-50 dark:bg-gray-850'
-									: ''} transition"
-								type="button"
-								on:click={() => {
-									tab = '';
-								}}>Modelfiles</button
-							>
-
-							<button
-								class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
-									? 'bg-gray-50 dark:bg-gray-850'
-									: ''} transition"
-								type="button"
-								on:click={() => {
-									tab = 'prompts';
-								}}>Prompts</button
-							>
-
-							<button
-								class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
-									? 'bg-gray-50 dark:bg-gray-850'
-									: ''} transition"
-								type="button"
-								on:click={() => {
-									tab = 'documents';
-								}}>Documents</button
-							>
-
-							<button
-								class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
-									? 'bg-gray-50 dark:bg-gray-850'
-									: ''} transition"
-								type="button"
-								on:click={() => {
-									tab = 'playground';
-								}}>Playground</button
-							>
-						</div>
-					</div>
-
-					<hr class=" my-2 dark:border-gray-850" />
-
-					<div class=" py-1 px-5 min-h-full">
-						{#if tab === ''}
-							<Modelfiles />
-						{:else if tab === 'prompts'}
-							<Prompts />
-						{:else if tab === 'documents'}
-							<Documents />
-						{:else if tab === 'playground'}
-							<Playground />
-						{/if}
-					</div>
-				</div>
+				</button>
 			</div>
+			<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
 		</div>
 	</div>
+
+	<div class="px-4 mb-1">
+		<div
+			class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
+		>
+			<button
+				class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				type="button"
+				on:click={() => {
+					tab = '';
+				}}>Modelfiles</button
+			>
+
+			<button
+				class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				type="button"
+				on:click={() => {
+					tab = 'prompts';
+				}}>Prompts</button
+			>
+
+			<button
+				class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				type="button"
+				on:click={() => {
+					tab = 'documents';
+				}}>Documents</button
+			>
+
+			<button
+				class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				type="button"
+				on:click={() => {
+					tab = 'playground';
+				}}>Playground</button
+			>
+		</div>
+	</div>
+
+	<hr class=" my-2 dark:border-gray-850" />
+
+	<div class=" py-1 px-5 h-full">
+		{#if tab === ''}
+			<Modelfiles />
+		{:else if tab === 'prompts'}
+			<Prompts />
+		{:else if tab === 'documents'}
+			<Documents />
+		{:else if tab === 'playground'}
+			<Playground />
+		{/if}
+	</div>
 </div>