mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fixed small screen breaking (#1075)

Browse source 
* fixed small screen breaking

* fixed lint err
This commit is contained in:
Syed Ali Shahbaz 2021-10-29 18:29:23 +05:30 committed by GitHub
parent ed4587b3af
commit 5291dade42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/team/MemberListItem.tsx
View file

@ -23,6 +23,7 @@ export default function MemberListItem(props: {
member && ( member && (
<li className="divide-y"> <li className="divide-y">
<div className="flex justify-between my-4"> <div className="flex justify-between my-4">
<div className="flex flex-col justify-between w-full sm:flex-row">
<div className="flex"> <div className="flex">
<Avatar <Avatar
imageSrc={ imageSrc={
@ -31,7 +32,7 @@ export default function MemberListItem(props: {
: "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" + : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
encodeURIComponent(props.member.name || "") encodeURIComponent(props.member.name || "")
} }
displayName={props.member.name || ""} alt={props.member.name || ""}
className="rounded-full w-9 h-9" className="rounded-full w-9 h-9"
/> />
<div className="inline-block ml-3"> <div className="inline-block ml-3">
@ -39,7 +40,7 @@ export default function MemberListItem(props: {
<span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span> <span className="block -mt-1 text-xs text-gray-400">{props.member.email}</span>
</div> </div>
</div> </div>
<div className="flex"> <div>
{props.member.role === "INVITEE" && ( {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"> <span className="self-center h-6 px-3 py-1 mr-2 text-xs text-yellow-700 capitalize rounded-md bg-yellow-50">
@ -60,6 +61,11 @@ export default function MemberListItem(props: {
{t("owner")} {t("owner")}
</span> </span>
)} )}
</div>
</div>
<div className="flex">
{/* <div className="flex flex-col-reverse"> */}
<Dropdown> <Dropdown>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<DotsHorizontalIcon className="w-5 h-5" /> <DotsHorizontalIcon className="w-5 h-5" />
@ -89,6 +95,7 @@ export default function MemberListItem(props: {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</Dropdown> </Dropdown>
{/* </div> */}
</div> </div>
</div> </div>
</li> </li>