fix: drodown menu on user card is cropped (#444)

**Describe the pull request**
This pull request addresses an issue where the dropdown menu on the user
card is being cropped, hindering its usability. The fix involves
adjusting the CSS rules and layout properties of the dropdown menu to
ensure that it is fully visible and accessible.

**Checklist**

- [x] I have made the modifications or added tests related to my PR
- [x] I have run the tests and linters locally and they pass
- [x] I have added/updated the documentation for my RP

Author: 42atomys

web/ui/src/components/UserCard/UserCard.tsx

@@ -25,21 +25,23 @@ export const UserCard: React.FC<PropsWithClassName<UserCardProps>> = ({
       className={classNames(
         'relative group',
         'text-center grow-[1] min-w-[200px] max-w-[200px] transition-all',
-        'rounded-lg border-2 border-transparent hover:cursor-pointer overflow-hidden',
+        'rounded-lg border-2 border-transparent hover:cursor-pointer',
         className
       )}
     >
       {hasCover && (
-        <div
-          className={classNames(
-            'absolute top-0 left-0 right-0 bg-cover bg-center w-full h-full blur-sm scale-110',
-            '[-webkit-mask-image:linear-gradient(rgb(0,0,0)0%,rgba(0,0,0,0)58%)]',
-            'dark:[-webkit-mask-image:linear-gradient(rgb(0,0,0)42%,rgba(0,0,0,0.2)58%)]'
-          )}
-          style={{
-            backgroundImage: `url(${user.coverURL})`,
-          }}
-        />
+        <div className="absolute top-0 left-0 right-0 overflow-hidden w-full h-full rounded-lg">
+          <div
+            className={classNames(
+              'bg-cover bg-center w-full h-full blur-sm scale-110',
+              '[-webkit-mask-image:linear-gradient(rgb(0,0,0)0%,rgba(0,0,0,0)58%)]',
+              'dark:[-webkit-mask-image:linear-gradient(rgb(0,0,0)42%,rgba(0,0,0,0.2)58%)]'
+            )}
+            style={{
+              backgroundImage: `url(${user.coverURL})`,
+            }}
+          />
+        </div>
       )}
       <div className="relative w-full h-full flex flex-col items-center justify-center p-4 z-10">
         <Avatar