From 19a7cd1a50f44cd532eac7e0b251842ad7501fd4 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Fri, 23 Jun 2023 14:18:20 +0530
Subject: [PATCH] fix: invite modal (#9713)

* fix: invite modal

* fix: truncate text
---
 .../components/MemberInvitationModal.tsx      | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 21db9acde4..dcb87caf19 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -152,10 +152,14 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             options={[
               {
                 value: "INDIVIDUAL",
-                label: t("invite_team_individual_segment"),
+                label: <span className="line-clamp-1">{t("invite_team_individual_segment")}</span>,
                 iconLeft: <UserIcon />,
               },
-              { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <Users /> },
+              {
+                value: "BULK",
+                label: <span className="line-clamp-1">{t("invite_team_bulk_segment")}</span>,
+                iconLeft: <Users />,
+              },
             ]}
           />
         </div>
@@ -295,39 +299,39 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             </div>
           </div>
           <DialogFooter showDivider>
-            <div className="relative right-40">
-              <Button
-                type="button"
-                color="minimal"
-                variant="icon"
-                onClick={() =>
-                  props.token
-                    ? copyInviteLinkToClipboard(props.token)
-                    : createInviteMutation.mutate({ teamId: props.teamId })
-                }
-                className={classNames("gap-2", props.token && "opacity-50")}
-                data-testid="copy-invite-link-button">
-                <Link className="text-default h-4 w-4" aria-hidden="true" />
-                {t("copy_invite_link")}
-              </Button>
-            </div>
+            <div className="flex w-full flex-col items-end gap-2 md:flex-row md:items-center md:justify-between">
+              <div>
+                <Button
+                  type="button"
+                  color="minimal"
+                  variant="icon"
+                  onClick={() =>
+                    props.token
+                      ? copyInviteLinkToClipboard(props.token)
+                      : createInviteMutation.mutate({ teamId: props.teamId })
+                  }
+                  className={classNames("gap-2", props.token && "opacity-50")}
+                  data-testid="copy-invite-link-button">
+                  <Link className="text-default h-4 w-4" aria-hidden="true" />
+                  {t("copy_invite_link")}
+                </Button>
+              </div>
 
-            <Button
-              type="button"
-              color="minimal"
-              onClick={() => {
-                props.onExit();
-                resetFields();
-              }}>
-              {t("cancel")}
-            </Button>
-            <Button
-              type="submit"
-              color="primary"
-              className="me-2 ms-2"
-              data-testid="invite-new-member-button">
-              {t("send_invite")}
-            </Button>
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  color="minimal"
+                  onClick={() => {
+                    props.onExit();
+                    resetFields();
+                  }}>
+                  {t("cancel")}
+                </Button>
+                <Button type="submit" color="primary" data-testid="invite-new-member-button">
+                  {t("send_invite")}
+                </Button>
+              </div>
+            </div>
           </DialogFooter>
         </Form>
       </DialogContent>