🐛 Front-end development and optimization of market interface display

Author: Phinease

doc/docs/en/opensource-memorial-wall.md

@@ -68,6 +68,6 @@ Really impressed by Nexent — smooth interface and powerful agent framework. Gr
 Nexent represents the future of intelligent agent creation — simple, elegant, and incredibly powerful. As a true zero-code platform, it eliminates the need for orchestration or complex drag-and-drop workflows, allowing anyone to build agents using pure natural language. Built on the robust MCP ecosystem with rich tool integrations, Nexent goes far beyond basic automation by offering a suite of built-in agents tailored for real-world scenarios — from work and travel to everyday life. Its capabilities for agent execution control, multi-agent collaboration, data processing and knowledge tracing, multimodal dialogue, and batch scaling set a new benchmark in intelligent service platforms. Nexent doesn’t just accelerate development — it redefines what’s possible.
 :::
 
-::: info uu - 2024-01-15
+::: info uu - 2025-11-27
 Huawei ICT Agent, thanks to the nexent platform for its support!
 :::

frontend/app/[locale]/agents/components/agent/SubAgentPool.tsx

@@ -121,6 +121,24 @@ export default function SubAgentPool({
           opacity: 0.5;
           cursor: not-allowed !important;
         }
+
+        /* Agent description clamps to 1 line on small screens */
+        .agent-description {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 1.25;
+          -webkit-line-clamp: 1;
+          max-height: 1.25rem;
+        }
+
+        @media (min-width: 640px) {
+          .agent-description {
+            -webkit-line-clamp: 2;
+            max-height: 2.5rem;
+          }
+        }
       `}</style>
       <div className="flex flex-col h-full min-h-[300px] lg:min-h-0 overflow-hidden">
         <div className="flex justify-between items-center mb-2">
@@ -298,7 +316,7 @@ export default function SubAgentPool({
                       }}
                     >
                       <div className="flex items-center h-full">
-                        <div className="flex-1 overflow-hidden">
+                        <div className="flex-1 overflow-hidden min-w-0">
                           <div
                             className={`font-medium text-base truncate transition-colors duration-300 ${
                               !isAvailable ? "text-gray-500" : ""
@@ -333,24 +351,16 @@ export default function SubAgentPool({
                             </div>
                           </div>
                           <div
-                            className={`text-xs line-clamp-2 transition-colors duration-300 leading-[1.25] overflow-hidden ${
+                            className={`text-xs transition-colors duration-300 leading-[1.25] agent-description ${
                               !isAvailable ? "text-gray-400" : "text-gray-500"
                             }`}
-                            style={{
-                              display: "-webkit-box",
-                              WebkitLineClamp: 2,
-                              WebkitBoxOrient: "vertical",
-                              overflow: "hidden",
-                              textOverflow: "ellipsis",
-                              maxHeight: "2.5rem",
-                            }}
                           >
                             {agent.description}
                           </div>
                         </div>
 
                         {/* Operation button area */}
-                        <div className="flex items-center gap-1 ml-2">
+                        <div className="flex items-center gap-1 ml-2 flex-shrink-0">
                           {/* View call relationship button */}
                           <Tooltip>
                             <TooltipTrigger asChild>

frontend/components/navigation/SideNavigation.tsx

@@ -71,6 +71,9 @@ export function SideNavigation({
   const pathname = usePathname();
   const [collapsed, setCollapsed] = useState(false);
   const [selectedKey, setSelectedKey] = useState("0");
+  const expandedWidth = 277;
+  const collapsedWidth = 64;
+  const siderWidth = collapsed ? collapsedWidth : expandedWidth;
 
   // Update selected key when pathname or currentView changes
   useEffect(() => {
@@ -247,35 +250,39 @@ export function SideNavigation({
       }}
     >
       <div style={{ position: "relative" }}>
-        <Sider
-          collapsed={collapsed}
-          trigger={null}
-          breakpoint="lg"
-          collapsedWidth={64}
-          width={277}
-          className="!bg-white/95 dark:!bg-slate-900/95 border-r border-slate-200 dark:border-slate-700 backdrop-blur-sm shadow-sm"
-          style={{
-            overflow: "auto",
-            height: sidebarHeight,
-            position: "sticky",
-            top: sidebarTop,
-            left: 0,
-          }}
-        >
-          <div className="py-2 h-full">
-            <Menu
-              mode="inline"
-              selectedKeys={[selectedKey]}
-              items={menuItems}
-              onClick={({ key }) => setSelectedKey(key)}
-              className="!bg-transparent !border-r-0"
-              style={{
-                height: "100%",
-                borderRight: 0,
-              }}
-            />
-          </div>
-        </Sider>
+        <div style={{ width: `${siderWidth}px`, flexShrink: 0 }}>
+          <Sider
+            collapsed={collapsed}
+            trigger={null}
+            breakpoint="lg"
+            collapsedWidth={collapsedWidth}
+            width={expandedWidth}
+            className="!bg-white/95 dark:!bg-slate-900/95 border-r border-slate-200 dark:border-slate-700 backdrop-blur-sm shadow-sm"
+            style={{
+              overflow: "auto",
+              minHeight: sidebarHeight,
+              height: sidebarHeight,
+              position: "fixed",
+              top: sidebarTop,
+              left: 0,
+              width: `${siderWidth}px`,
+            }}
+          >
+            <div className="py-2 h-full">
+              <Menu
+                mode="inline"
+                selectedKeys={[selectedKey]}
+                items={menuItems}
+                onClick={({ key }) => setSelectedKey(key)}
+                className="!bg-transparent !border-r-0"
+                style={{
+                  height: "100%",
+                  borderRight: 0,
+                }}
+              />
+            </div>
+          </Sider>
+        </div>
 
         {/* Custom circular floating toggle button - positioned outside Sider */}
         <Button
@@ -297,7 +304,7 @@ export function SideNavigation({
             alignItems: "center",
             justifyContent: "center",
             border: "2px solid white",
-            zIndex: 1000,
+            zIndex: 800,
             transition: "left 0.2s ease",
           }}
           icon={