From 5b036067edd0db9211e44938a8b00ea0b0c9d950 Mon Sep 17 00:00:00 2001
From: Zack Pollard <zackpollard@ymail.com>
Date: Mon, 6 Jun 2022 03:12:12 +0100
Subject: [PATCH] Fix sidebar layout (#204)

* fix: sidebar margins with more than one item incorrect

* fix: api url in sidebar shouldn't overflow the sidebar width
---
 web/src/lib/components/shared/status-box.svelte | 4 +---
 web/src/routes/admin/index.svelte               | 4 ++--
 web/src/routes/photos/index.svelte              | 4 ++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/shared/status-box.svelte b/web/src/lib/components/shared/status-box.svelte
index 4609f5d8b0f50..e8b95217fc6bc 100644
--- a/web/src/lib/components/shared/status-box.svelte
+++ b/web/src/lib/components/shared/status-box.svelte
@@ -77,9 +77,7 @@
 		<div class="text-xs">
 			<p class="text-sm font-medium text-immich-primary">Server</p>
 
-			<div class="border p-2 rounded-md bg-gray-200 mt-2">
-				<p class="text-immich-primary font-medium">{endpoint}</p>
-			</div>
+			<input class="border p-2 rounded-md bg-gray-200 mt-2 text-immich-primary font-medium" value="{endpoint}" disabled="true">
 			<div class="flex justify-items-center justify-between mt-2">
 				<p>Status</p>
 
diff --git a/web/src/routes/admin/index.svelte b/web/src/routes/admin/index.svelte
index 0965ff85d1adc..b9e0c6bea1cbe 100644
--- a/web/src/routes/admin/index.svelte
+++ b/web/src/routes/admin/index.svelte
@@ -75,7 +75,7 @@
 {/if}
 
 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
-	<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col justify-between">
+	<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col">
 		<SideBarButton
 			title="User"
 			logo={AccountMultipleOutline}
@@ -84,7 +84,7 @@
 			on:selected={onButtonClicked}
 		/>
 
-		<div class="mb-6">
+		<div class="mb-6 mt-auto">
 			<StatusBox />
 		</div>
 	</section>
diff --git a/web/src/routes/photos/index.svelte b/web/src/routes/photos/index.svelte
index 4d9c7e2fce795..8c957ad5dd7f2 100644
--- a/web/src/routes/photos/index.svelte
+++ b/web/src/routes/photos/index.svelte
@@ -92,7 +92,7 @@
 
 <section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
 	<!-- Sidebar -->
-	<section id="admin-sidebar" class="flex flex-col justify-between gap-4 pt-8 pr-6">
+	<section id="sidebar" class="flex flex-col gap-4 pt-8 pr-6">
 		<SideBarButton
 			title="Photos"
 			logo={ImageOutline}
@@ -103,7 +103,7 @@
 
 		<!-- Status Box -->
 
-		<div class="mb-6">
+		<div class="mb-6 mt-auto">
 			<StatusBox />
 		</div>
 	</section>