From fa9a2ccac1d1b93a8ec142673abbbd5ddade3900 Mon Sep 17 00:00:00 2001
From: simiondolha <simiondolha@users.noreply.github.com>
Date: Sat, 10 Jan 2026 01:00:51 +0100
Subject: [PATCH 1/2] fix: improve ListLinkItem responsive layout for narrow
 viewports

- Use flex-col layout on mobile, flex-row on larger screens (sm+)
- Add min-w-0 to Link element for proper text truncation in flex
- Allow heading and readonly badge to wrap with flex-wrap gap-1
- Move truncate to h1 heading specifically
- Wrap actions in shrink-0 container to prevent shrinking

This fixes text being cut off and actions overlapping content at narrow
viewports like 325px.

Fixes #26579

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/ui/components/list/List.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index 1487bb970d1c60..0ae57f5487517d 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -93,7 +93,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
     <li
       data-testid="list-link-item"
       className={classNames(
-        "group flex w-full items-center justify-between p-5 pb-4",
+        "group flex w-full flex-col gap-3 p-5 pb-4 sm:flex-row sm:items-center sm:justify-between",
         className,
         disabled ? "hover:bg-cal-muted" : ""
       )}>
@@ -101,13 +101,13 @@ export function ListLinkItem(props: ListLinkItemProps) {
         passHref
         href={href}
         className={classNames(
-          "text-default grow truncate text-sm",
+          "text-default min-w-0 grow text-sm",
           disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
         )}>
-        <div className="flex items-center">
-          <h1 className="text-sm font-semibold leading-none">{heading}</h1>
+        <div className="flex flex-wrap items-center gap-1">
+          <h1 className="truncate text-sm font-semibold leading-none">{heading}</h1>
           {readOnly && (
-            <Badge data-testid="badge" variant="gray" className="ml-2">
+            <Badge data-testid="badge" variant="gray">
               {t("readonly")}
             </Badge>
           )}
@@ -118,7 +118,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
         </h2>
         <div className="mt-2">{children}</div>
       </Link>
-      {actions}
+      <div className="flex shrink-0 items-center">{actions}</div>
     </li>
   );
 }

From e37a9b39b3fda4d18b826a6656dfbe89d29e6ea9 Mon Sep 17 00:00:00 2001
From: simiondolha <simiondolha@users.noreply.github.com>
Date: Sat, 10 Jan 2026 09:26:37 +0100
Subject: [PATCH 2/2] fix: remove LicenseRequired wrapper from team members
 page

Removes the LicenseRequired wrapper that was incorrectly gating
team member management for self-hosted users.

Fixes #23227

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../ee/teams/views/team-members-view.tsx      | 55 +++++++++----------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/apps/web/modules/ee/teams/views/team-members-view.tsx b/apps/web/modules/ee/teams/views/team-members-view.tsx
index a9de10ce5361c7..90484505a72d0f 100644
--- a/apps/web/modules/ee/teams/views/team-members-view.tsx
+++ b/apps/web/modules/ee/teams/views/team-members-view.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 
-import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { MemberPermissions } from "@calcom/features/pbac/lib/team-member-permissions";
@@ -43,34 +42,32 @@ export const TeamMembersView = ({ team, facetedTeamValues, permissions }: TeamMe
   const canLoggedInUserSeeMembers = permissions?.canListMembers ?? false;
 
   return (
-    <LicenseRequired>
-      <div>
-        {canLoggedInUserSeeMembers && (
-          <div className="mb-6">
-            <MemberList
-              team={team}
-              isOrgAdminOrOwner={false}
-              setShowMemberInvitationModal={setShowMemberInvitationModal}
-              facetedTeamValues={facetedTeamValues}
-              permissions={permissions}
-            />
-          </div>
-        )}
-        {!canLoggedInUserSeeMembers && (
-          <div className="border-subtle rounded-xl border p-6" data-testid="members-privacy-warning">
-            <h2 className="text-default">{t("only_admin_can_see_members_of_team")}</h2>
-          </div>
-        )}
-        {showMemberInvitationModal && team && team.id && (
-          <MemberInvitationModalWithoutMembers
-            hideInvitationModal={() => setShowMemberInvitationModal(false)}
-            showMemberInvitationModal={showMemberInvitationModal}
-            teamId={team.id}
-            token={team.inviteToken?.token}
-            onSettingsOpen={() => setShowInviteLinkSettingsModal(true)}
+    <div>
+      {canLoggedInUserSeeMembers && (
+        <div className="mb-6">
+          <MemberList
+            team={team}
+            isOrgAdminOrOwner={false}
+            setShowMemberInvitationModal={setShowMemberInvitationModal}
+            facetedTeamValues={facetedTeamValues}
+            permissions={permissions}
           />
-        )}
-      </div>
-    </LicenseRequired>
+        </div>
+      )}
+      {!canLoggedInUserSeeMembers && (
+        <div className="border-subtle rounded-xl border p-6" data-testid="members-privacy-warning">
+          <h2 className="text-default">{t("only_admin_can_see_members_of_team")}</h2>
+        </div>
+      )}
+      {showMemberInvitationModal && team && team.id && (
+        <MemberInvitationModalWithoutMembers
+          hideInvitationModal={() => setShowMemberInvitationModal(false)}
+          showMemberInvitationModal={showMemberInvitationModal}
+          teamId={team.id}
+          token={team.inviteToken?.token}
+          onSettingsOpen={() => setShowInviteLinkSettingsModal(true)}
+        />
+      )}
+    </div>
   );
 };