From bc66b1a556bf51a496397a4a618fb415e2183985 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Wed, 16 Aug 2023 03:46:23 +0200
Subject: [PATCH] fix(web): user-management layout (#3704)

* fix: user-management layout

* better user form scrollbar

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../components/forms/edit-user-form.svelte    |  2 +-
 web/src/routes/admin/+layout.svelte           |  4 +--
 .../routes/admin/user-management/+page.svelte | 36 +++++++++----------
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index 760c5f48ef11a..5881488508c86 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -67,7 +67,7 @@
 </script>
 
 <div
-  class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
 >
   <div
     class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte
index f484c4773ce81..b9586c9088be4 100644
--- a/web/src/routes/admin/+layout.svelte
+++ b/web/src/routes/admin/+layout.svelte
@@ -69,8 +69,8 @@
     </div>
   </SideBarSection>
 
-  <section id="setting-content" class="mx-4 flex place-content-center">
-    <section class="w-full pb-28 pt-5 sm:w-5/6 md:w-[800px]">
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 pt-5 sm:w-5/6 md:w-[850px]">
       <slot />
     </section>
   </section>
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index 5dbe71aca3879..586d5a3042e19 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -168,11 +168,11 @@
       class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
     >
       <tr class="flex w-full place-items-center">
-        <th class="w-1/4 text-center text-sm font-medium">Email</th>
-        <th class="w-1/4 text-center text-sm font-medium">First name</th>
-        <th class="w-1/4 text-center text-sm font-medium">Last name</th>
-        <th class="w-1/4 text-center text-sm font-medium">Can import</th>
-        <th class="w-1/4 text-center text-sm font-medium">Action</th>
+        <th class="w-4/12 text-center text-sm font-medium">Email</th>
+        <th class="w-2/12 text-center text-sm font-medium">First name</th>
+        <th class="w-2/12 text-center text-sm font-medium">Last name</th>
+        <th class="w-2/12 text-center text-sm font-medium">Can import</th>
+        <th class="w-2/12 text-center text-sm font-medium">Action</th>
       </tr>
     </thead>
     <tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
@@ -187,10 +187,10 @@
                 : 'bg-immich-bg dark:bg-immich-dark-gray/50'
             }`}
           >
-            <td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.email}</td>
-            <td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.firstName}</td>
-            <td class="w-1/4 text-ellipsis break-all px-4 text-sm">{user.lastName}</td>
-            <td class="w-1/4 text-ellipsis break-all px-4 text-sm">
+            <td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td>
+            <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.firstName}</td>
+            <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.lastName}</td>
+            <td class="w-2/12 text-ellipsis break-all px-2 text-sm">
               <div class="container mx-auto flex flex-wrap justify-center">
                 {#if user.externalPath}
                   <Check size="16" />
@@ -199,7 +199,7 @@
                 {/if}
               </div>
             </td>
-            <td class="w-1/4 text-ellipsis break-all px-4 text-sm">
+            <td class="w-2/12 text-ellipsis break-all px-4 text-sm">
               {#if !isDeleted(user)}
                 <button
                   on:click={() => editUserHandler(user)}
@@ -237,11 +237,9 @@
       class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
     >
       <tr class="flex w-full place-items-center">
-        <th class="flex w-1/2 justify-around text-center text-sm font-medium">
-          <span>Name</span>
-          <span>Email</span>
-        </th>
-        <th class="w-1/2 text-center text-sm font-medium">Action</th>
+        <th class="w-1/4 text-center text-sm font-medium">Name</th>
+        <th class="w-1/2 text-center text-sm font-medium">Email</th>
+        <th class="w-1/4 text-center text-sm font-medium">Action</th>
       </tr>
     </thead>
     <tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
@@ -256,11 +254,9 @@
                 : 'bg-immich-bg dark:bg-immich-dark-gray/50'
             }`}
           >
-            <td class="w-2/3 text-ellipsis px-4 text-sm">
-              <span>{user.firstName} {user.lastName}</span>
-              <span>{user.email}</span>
-            </td>
-            <td class="w-1/3 text-ellipsis px-4 text-sm">
+            <td class="w-1/4 text-ellipsis break-words px-2 text-sm">{user.firstName} {user.lastName}</td>
+            <td class="w-1/2 text-ellipsis break-all px-2 text-sm">{user.email}</td>
+            <td class="w-1/4 text-ellipsis px-2 text-sm">
               {#if !isDeleted(user)}
                 <button
                   on:click={() => editUserHandler(user)}