fix profile picture being hidden on small screens

Dsek-LTH · Sep 15, 2024 · 9f7f173 · 9f7f173
1 parent c42f042
commit 9f7f173
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/routes/(app)/members/[studentId]/+page.server.ts b/src/routes/(app)/members/[studentId]/+page.server.ts
@@ -85,10 +85,12 @@ export const load: PageServerLoad = async ({ locals, params }) => {
       : [];
 
   const email =
-    (user.studentId === studentId ||
-      isAuthorized(apiNames.MEMBER.SEE_EMAIL, user)) &&
-    member.studentId !== null
-      ? await keycloak.getEmail(member.studentId)
+    user.studentId === studentId ||
+    isAuthorized(apiNames.MEMBER.SEE_EMAIL, user)
+      ? (member.email ??
+        (member.studentId !== null
+          ? await keycloak.getEmail(member.studentId)
+          : undefined))
       : undefined;
 
   try {

diff --git a/src/routes/(app)/members/[studentId]/ProfileHeader.svelte b/src/routes/(app)/members/[studentId]/ProfileHeader.svelte
@@ -13,12 +13,14 @@
     <div
       class="order-2 flex flex-row items-center gap-2 text-nowrap lg:order-3"
     >
-      {member.studentId}
-      {#if email}
-        {email}
-      {/if}
+      <div>{member.studentId}</div>
       <ClassBadge {member} size="sm" />
     </div>
+    {#if email}
+      <div class="order-4 select-all break-all">
+        {email}
+      </div>
+    {/if}
   </div>
   <div class="hidden sm:block md:hidden">
     <slot name="actions" />

diff --git a/src/routes/(app)/members/[studentId]/ProfilePage.svelte b/src/routes/(app)/members/[studentId]/ProfilePage.svelte
@@ -46,7 +46,7 @@
     </MemberAvatar>
   </div>
   <!-- Name, StiL-ID, badge and actions -->
-  <header class="md:col-start-2 md:col-end-4">
+  <header class="overflow-x-auto md:col-start-2 md:col-end-4">
     <ProfileHeader {member} email={data.email}>
       <div slot="actions" class="flex gap-2">
         {#if canEdit}