fix: onboarding invitations overflow (#1575)

* fix: onboarding invitations overflow

* fix: user avatar in the notification card

* style: update graph grid color

apps/app/components/account/email-code-form.tsx

@@ -120,7 +120,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           Please check your inbox at <span className="font-medium">{watch("email")}</span>
         </p>
       )}
-      <form className="space-y-4 mt-10">
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
         <div className="space-y-1">
           <Input
             id="email"

apps/app/components/notifications/notification-card.tsx

@@ -90,13 +90,15 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         <div className="relative w-12 h-12 rounded-full">
           {notification.triggered_by_details.avatar &&
           notification.triggered_by_details.avatar !== "" ? (
-            <Image
-              src={notification.triggered_by_details.avatar}
-              alt="profile image"
-              layout="fill"
-              objectFit="cover"
-              className="rounded-full"
-            />
+            <div className="h-12 w-12 rounded-full">
+              <Image
+                src={notification.triggered_by_details.avatar}
+                alt="Profile Image"
+                layout="fill"
+                objectFit="cover"
+                className="rounded-full"
+              />
+            </div>
           ) : (
             <div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center">
               <span className="text-custom-text-100 font-medium text-lg">

apps/app/components/onboarding/join-workspaces.tsx

@@ -88,7 +88,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
     <div className="w-full space-y-7 sm:space-y-10">
       <h5 className="sm:text-lg">We see that someone has invited you to</h5>
       <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
-      <div className="md:w-3/5 space-y-4">
+      <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
         {invitations &&
           invitations.map((invitation) => {
             const isSelected = invitationsRespond.includes(invitation.id);
@@ -146,7 +146,11 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
         >
           Accept & Join
         </PrimaryButton>
-        <SecondaryButton className="border border-none bg-transparent" size="md" onClick={finishOnboarding} >
+        <SecondaryButton
+          className="border border-none bg-transparent"
+          size="md"
+          onClick={finishOnboarding}
+        >
           Skip for now
         </SecondaryButton>
       </div>