From 05457aca0d20c6e3194bf99b2618373d139bcdea Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sat, 14 Mar 2026 23:30:37 +0200
Subject: [PATCH] refactor: improve TeamDetailView and MemberList components
 for better responsiveness and UI clarity

- Removed unnecessary inline styles from TeamDetailView for cleaner code.
- Added responsive grid layout to MemberList using ResizeObserver to adjust the display based on container width.
- Integrated tooltip functionality in LimitContextCheckbox to provide context on token limits, enhancing user experience.
---
 .../components/team/TeamDetailView.tsx        |  9 +------
 .../team/dialogs/LimitContextCheckbox.tsx     | 23 ++++++++++++++++
 .../components/team/members/MemberList.tsx    | 27 ++++++++++++++++---
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/team/TeamDetailView.tsx b/src/renderer/components/team/TeamDetailView.tsx
index 2d2d9c9e..3bbddb81 100644
--- a/src/renderer/components/team/TeamDetailView.tsx
+++ b/src/renderer/components/team/TeamDetailView.tsx
@@ -1125,14 +1125,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
             </div>
           )}
 
-          <div
-            className="relative -mx-4 -mt-4 mb-3 overflow-hidden border-b border-[var(--color-border)] px-4 py-3"
-            style={
-              headerColorSet
-                ? { borderLeftWidth: '3px', borderLeftColor: headerColorSet.border }
-                : undefined
-            }
-          >
+          <div className="relative -mx-4 -mt-4 mb-3 overflow-hidden border-b border-[var(--color-border)] px-4 py-3">
             {headerColorSet ? (
               <div
                 className="pointer-events-none absolute inset-0 z-0"
diff --git a/src/renderer/components/team/dialogs/LimitContextCheckbox.tsx b/src/renderer/components/team/dialogs/LimitContextCheckbox.tsx
index a55535ab..39363949 100644
--- a/src/renderer/components/team/dialogs/LimitContextCheckbox.tsx
+++ b/src/renderer/components/team/dialogs/LimitContextCheckbox.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
 
+import { Info } from 'lucide-react';
+
 import { Checkbox } from '@renderer/components/ui/checkbox';
 import { Label } from '@renderer/components/ui/label';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
 
 interface LimitContextCheckboxProps {
   id: string;
@@ -32,5 +40,20 @@ export const LimitContextCheckbox: React.FC<LimitContextCheckboxProps> = ({
       Limit context to 200K tokens
       {disabled && <span className="text-[10px] italic">(always 200K for this model)</span>}
     </Label>
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Info
+            className={`size-3.5 shrink-0 ${disabled ? 'text-text-muted opacity-50' : 'text-text-muted hover:text-text-secondary'} cursor-help`}
+          />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-[260px]">
+          <p>
+            Agents will use 200K context window instead of the default 1M. Useful if you want to
+            save tokens and reduce costs.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   </div>
 );
diff --git a/src/renderer/components/team/members/MemberList.tsx b/src/renderer/components/team/members/MemberList.tsx
index 175066c9..88e207fe 100644
--- a/src/renderer/components/team/members/MemberList.tsx
+++ b/src/renderer/components/team/members/MemberList.tsx
@@ -1,4 +1,5 @@
-import { useStore } from '@renderer/store';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
 import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
 
 import { MemberCard } from './MemberCard';
@@ -45,8 +46,26 @@ export const MemberList = ({
   onAssignTask,
   onOpenTask,
 }: MemberListProps): React.JSX.Element => {
-  const sidebarCollapsed = useStore((s) => s.sidebarCollapsed);
-  const gridClass = sidebarCollapsed ? 'grid grid-cols-2 gap-1' : 'grid grid-cols-1 gap-1';
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isWide, setIsWide] = useState(false);
+
+  const handleResize = useCallback((entries: ResizeObserverEntry[]) => {
+    const entry = entries[0];
+    if (entry) {
+      setIsWide(entry.contentRect.width > 1000);
+    }
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [handleResize]);
+
+  const gridClass = isWide ? 'grid grid-cols-2 gap-1' : 'grid grid-cols-1 gap-1';
   const activeMembers = members
     .filter((m) => !m.removedAt)
     .sort((a, b) => {
@@ -106,7 +125,7 @@ export const MemberList = ({
   };
 
   return (
-    <div className="flex flex-col gap-1">
+    <div ref={containerRef} className="flex flex-col gap-1">
       <div className={gridClass}>{activeMembers.map((member) => renderCard(member, false))}</div>
       {removedMembers.length > 0 && (
         <>