Roles user card scroll fix (#154)

* scroll fix * added gap to user card
kir-dev · Dec 19, 2024 · b7541d9 · b7541d9
1 parent 2e31d5e
commit b7541d9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/apps/frontend/src/app/periods/[id]/columns.tsx b/apps/frontend/src/app/periods/[id]/columns.tsx
@@ -58,7 +58,7 @@ export const columns: (
           <HoverCardTrigger>
             <div className='flex gap-2 items-center'>
               <div className={`${getRoleBadgeColor(row.original.user.role, true)} h-6 w-1 rounded`} />
-              <p className=''>{row.original.user.fullName}</p>
+              <p>{row.original.user.fullName}</p>
               {row.original.user.isActiveVikStudent && <RiVerifiedBadgeLine size={16} />}
             </div>
           </HoverCardTrigger>

diff --git a/apps/frontend/src/components/ui/PassiveUserCard.tsx b/apps/frontend/src/components/ui/PassiveUserCard.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FiEdit2, FiUser } from 'react-icons/fi';
 
 import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -16,7 +15,7 @@ export default function UserCard(props: { user: UserEntity; onChange: (newRole:
             className='lg:rounded-l-lg max-lg:rounded-lg max-w-20 h-fit aspect-auto -m-4 max-md:-my-4'
           />
           <div className='overflow-scroll text-nowrap truncate justify-between flex flex-col h-auto'>
-            <CardTitle className=''>{props.user.fullName}</CardTitle>
+            <CardTitle>{props.user.fullName}</CardTitle>
             <CardDescription className='flex sm:gap-4 max-sm:gap-0 max-sm:flex-col sm:flex-row'>
               <p className='flex items-center gap-2'>
                 <FiUser />

diff --git a/apps/frontend/src/components/ui/UserCard.tsx b/apps/frontend/src/components/ui/UserCard.tsx
@@ -8,7 +8,7 @@ import Image from 'next/image';
 export default function UserCard(props: { user: UserEntity; onChange: (newRole: Role) => Promise<void> }) {
   return (
     <Card>
-      <CardHeader className='flex flex-row w-full justify-between items-center p-4 overflow-scroll'>
+      <CardHeader className='flex flex-row w-full justify-between items-center p-4 overflow-auto gap-4'>
         <div className='flex gap-8'>
           <Image
             src={`${process.env.NEXT_PUBLIC_API_URL}/users/${props.user.authSchId}/profile-picture`}
@@ -18,7 +18,7 @@ export default function UserCard(props: { user: UserEntity; onChange: (newRole:
             height={64}
           />
           <div className='overflow-scroll text-nowrap truncate justify-between flex flex-col h-auto'>
-            <CardTitle className=''>{props.user.fullName}</CardTitle>
+            <CardTitle>{props.user.fullName}</CardTitle>
             <CardDescription className='flex sm:gap-4 max-sm:gap-0 max-sm:flex-col sm:flex-row'>
               <p className='flex items-center gap-2'>
                 <FiUser />