From 47d822a092b5f81d0b2ce1d73b0c3bb5a3d9ceef Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Fri, 28 Mar 2025 09:24:26 -0400
Subject: [PATCH] fix: Dsync group table formatting (#20422)

* Fix column to take up entire table

* Fix formatting of group names

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 .../ee/dsync/components/GroupNameCell.tsx     | 21 +++++++++++--------
 .../components/GroupTeamMappingTable.tsx      |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/features/ee/dsync/components/GroupNameCell.tsx b/packages/features/ee/dsync/components/GroupNameCell.tsx
index ada92fa03d..bcd4eccde9 100644
--- a/packages/features/ee/dsync/components/GroupNameCell.tsx
+++ b/packages/features/ee/dsync/components/GroupNameCell.tsx
@@ -2,10 +2,10 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
-import { TextField } from "@calcom/ui/components/form";
 import classNames from "@calcom/ui/classNames";
+import { Badge } from "@calcom/ui/components/badge";
+import { TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 
 interface GroupNameCellProps {
@@ -72,18 +72,21 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
   };
 
   return (
-    <div className="flex items-center space-x-4">
+    <div className="flex flex-wrap items-center gap-2 space-x-4">
       {groupNames.map((name) => (
-        <Badge variant="gray" size="lg" key={name} className="h-8 py-4">
-          <div className="flex items-center space-x-2 ">
-            <p>{name}</p>
-            <div className="hover:bg-emphasis rounded p-1">
+        <Badge variant="gray" size="lg" key={name} className="min-h-8 h-auto py-2">
+          <div className="flex min-w-0 items-center gap-2">
+            <p className="min-w-0 break-words">{name}</p>
+            <div className="hover:bg-emphasis shrink-0 rounded p-1">
               <Icon name="x" className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
             </div>
           </div>
         </Badge>
       ))}
-      <Badge variant="gray" size="lg" className={classNames(!showTextInput && "hover:bg-emphasis")}>
+      <Badge
+        variant="gray"
+        size="lg"
+        className={classNames(!showTextInput && "hover:bg-emphasis", "min-h-8 h-auto py-2")}>
         <div
           className="flex items-center space-x-1"
           onClick={() => {
diff --git a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx
index 6dd4d2aef9..d74571563f 100644
--- a/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx
+++ b/packages/features/ee/dsync/components/GroupTeamMappingTable.tsx
@@ -40,7 +40,7 @@ const GroupTeamMappingTable = () => {
     {
       id: "group",
       header: t("group_name"),
-      size: 200,
+      size: 500,
       enableHiding: false,
       enableSorting: false,
       cell: ({ row }) => {