From 5291dade427958a61757ba6cbf1822d6977a56c3 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Fri, 29 Oct 2021 18:29:23 +0530
Subject: [PATCH] fixed small screen breaking (#1075)

* fixed small screen breaking

* fixed lint err
---
 components/team/MemberListItem.tsx | 73 ++++++++++++++++--------------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/components/team/MemberListItem.tsx b/components/team/MemberListItem.tsx
index 75a1ab1c..87f965d8 100644
--- a/components/team/MemberListItem.tsx
+++ b/components/team/MemberListItem.tsx
@@ -23,43 +23,49 @@ export default function MemberListItem(props: {
     member && (
       <li className="divide-y">
         <div className="flex justify-between my-4">
-          <div className="flex">
-            <Avatar
-              imageSrc={
-                props.member.avatar
-                  ? props.member.avatar
-                  : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
-                    encodeURIComponent(props.member.name || "")
-              }
-              displayName={props.member.name || ""}
-              className="rounded-full w-9 h-9"
-            />
-            <div className="inline-block ml-3">
-              <span className="text-sm font-bold text-neutral-700">{props.member.name}</span>
-              <span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
+          <div className="flex flex-col justify-between w-full sm:flex-row">
+            <div className="flex">
+              <Avatar
+                imageSrc={
+                  props.member.avatar
+                    ? props.member.avatar
+                    : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
+                      encodeURIComponent(props.member.name || "")
+                }
+                alt={props.member.name || ""}
+                className="rounded-full w-9 h-9"
+              />
+              <div className="inline-block ml-3">
+                <span className="text-sm font-bold text-neutral-700">{props.member.name}</span>
+                <span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
+              </div>
             </div>
-          </div>
-          <div className="flex">
-            {props.member.role === "INVITEE" && (
-              <>
-                <span className="self-center h-6 px-3 py-1 mr-2 text-xs text-yellow-700 capitalize rounded-md bg-yellow-50">
-                  {t("pending")}
-                </span>
+            <div>
+              {props.member.role === "INVITEE" && (
+                <>
+                  <span className="self-center h-6 px-3 py-1 mr-2 text-xs text-yellow-700 capitalize rounded-md bg-yellow-50">
+                    {t("pending")}
+                  </span>
+                  <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
+                    {t("member")}
+                  </span>
+                </>
+              )}
+              {props.member.role === "MEMBER" && (
                 <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
                   {t("member")}
                 </span>
-              </>
-            )}
-            {props.member.role === "MEMBER" && (
-              <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-pink-700 capitalize rounded-md bg-pink-50">
-                {t("member")}
-              </span>
-            )}
-            {props.member.role === "OWNER" && (
-              <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-blue-700 capitalize rounded-md bg-blue-50">
-                {t("owner")}
-              </span>
-            )}
+              )}
+              {props.member.role === "OWNER" && (
+                <span className="self-center h-6 px-3 py-1 mr-4 text-xs text-blue-700 capitalize rounded-md bg-blue-50">
+                  {t("owner")}
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex">
+            {/* <div className="flex flex-col-reverse"> */}
+
             <Dropdown>
               <DropdownMenuTrigger>
                 <DotsHorizontalIcon className="w-5 h-5" />
@@ -89,6 +95,7 @@ export default function MemberListItem(props: {
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </Dropdown>
+            {/* </div> */}
           </div>
         </div>
       </li>