Design bugs

gui/pages/Content/Agents/Details.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import styles from './Agents.module.css';
 import Image from "next/image";
 import {formatNumber} from "@/utils/utils";
@@ -11,6 +11,10 @@ export default function Details({agentDetails1, runCount, agentScheduleDetails,
   const [filteredInstructions, setFilteredInstructions] = useState([]);
   const [scheduleText, setScheduleText] = useState('');
   const [agentDetails, setAgentDetails] = useState(null)
+  const goalBoxRef = useRef(null);
+  const instructionBoxRef = useRef(null);
+  const constrainBoxRef = useRef(null);
+  const [isOverflowing, setIsOverflowing] = useState([false, false, false]);
   const info_text = {
     marginLeft: '7px',
   };
@@ -23,6 +27,22 @@ export default function Details({agentDetails1, runCount, agentScheduleDetails,
     fontSize: '11px'
   };
 
+  useEffect(() => {
+    const newOverflowing = [...isOverflowing];
+
+    if (goalBoxRef.current) {
+      newOverflowing[0] = goalBoxRef.current.scrollHeight > goalBoxRef.current.clientHeight;
+    }
+    if (instructionBoxRef.current) {
+      newOverflowing[1] = instructionBoxRef.current.scrollHeight > instructionBoxRef.current.clientHeight;
+    }
+    if (constrainBoxRef.current) {
+      newOverflowing[2] = constrainBoxRef.current.scrollHeight > constrainBoxRef.current.clientHeight;
+    }
+
+    setIsOverflowing(newOverflowing);
+  }, [agentDetails?.goal, filteredInstructions, agentDetails?.constraints]);
+
   const openToolkitTab = (toolId) => {
     EventBus.emit('openToolkitTab', {toolId: toolId});
   }
@@ -108,15 +128,15 @@ export default function Details({agentDetails1, runCount, agentScheduleDetails,
         <div style={info_text}>{agentDetails?.goal?.length || 0} Goals</div>
       </div>
       {agentDetails?.goal && agentDetails?.goal?.length > 0 && <div>
-        <div className={styles.large_text_box} style={!showGoals ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
+        <div ref={goalBoxRef} className={styles.large_text_box} style={!showGoals ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
           {agentDetails?.goal?.map((goal, index) => (<div key={index} style={{marginTop: '0'}}>
             <div>{index + 1}. {goal || ''}</div>
             {index !== agentDetails?.goal?.length - 1 && <br/>}
           </div>))}
         </div>
-        <div className={styles.show_more_button} onClick={() => setShowGoals(!showGoals)}>
+        {isOverflowing[0] && <div className={styles.show_more_button} onClick={() => setShowGoals(!showGoals)}>
           {showGoals ? 'Show Less' : 'Show More'}
-        </div>
+        </div>}
       </div>}
       {filteredInstructions && filteredInstructions.length > 0 && <div>
         <div className={styles.separator}></div>
@@ -125,15 +145,15 @@ export default function Details({agentDetails1, runCount, agentScheduleDetails,
           <div style={info_text}>{filteredInstructions.length || 0} Instructions</div>
         </div>
         <div>
-          <div className={styles.large_text_box}
+          <div className={styles.large_text_box} ref={instructionBoxRef}
                style={!showInstructions ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
             {filteredInstructions.map((instruction, index) => (<div key={index} style={{marginTop: '0'}}>
               <div>{index + 1}. {instruction || ''}</div>
               {index !== filteredInstructions.length - 1 && <br/>}
             </div>))}
           </div>
-          <div className={styles.show_more_button}
-               onClick={() => setShowInstructions(!showInstructions)}>{showInstructions ? 'Show Less' : 'Show More'}</div>
+          {isOverflowing[1] && <div className={styles.show_more_button}
+               onClick={() => setShowInstructions(!showInstructions)}>{showInstructions ? 'Show Less' : 'Show More'}</div>}
         </div>
       </div>}
       {agentDetails && <div>{agentDetails.tools && agentDetails.tools.length > 0 && <div>
@@ -156,15 +176,15 @@ export default function Details({agentDetails1, runCount, agentScheduleDetails,
           <div><Image width={15} height={15} src="/images/close_fullscreen.svg" alt="constraint-icon"/></div>
           <div style={info_text}>{agentDetails?.constraints.length || 0} Constraints</div>
         </div>
-        <div className={styles.large_text_box}
+        <div className={styles.large_text_box} ref={constrainBoxRef}
              style={!showConstraints ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
           {agentDetails?.constraints?.map((constraint, index) => (<div key={index} style={{marginTop: '0'}}>
             <div>{index + 1}. {constraint || ''}</div>
             {index !== agentDetails.constraints.length - 1 && <br/>}
           </div>))}
         </div>
-        <div className={styles.show_more_button}
-             onClick={() => setShowConstraints(!showConstraints)}>{showConstraints ? 'Show Less' : 'Show More'}</div>
+        {isOverflowing[2] && <div className={styles.show_more_button}
+             onClick={() => setShowConstraints(!showConstraints)}>{showConstraints ? 'Show Less' : 'Show More'}</div>}
       </div>}</div>}
       <div className={styles.separator}></div>
       <div className={styles.agent_info_box}>

gui/pages/Content/Knowledge/Knowledge.js

@@ -37,7 +37,7 @@ export default function Knowledge({sendKnowledgeData, knowledge}) {
                         <div style={{marginLeft: '8px'}}>
                           <div className={styles.tool_name}>{item.name}&nbsp;{item.is_marketplace &&
                             <Image width={13} height={13} src="/images/widgets.svg" alt="markteplace-icon"/>}</div>
-                          <div className={styles.tool_publisher}>by {item.contributed_by}</div>
+                          <div className="item_publisher">by {item.contributed_by}</div>
                         </div>
                       </div>
                     </div>

gui/pages/Content/Toolkits/Toolkits.js

@@ -18,7 +18,7 @@ export default function Toolkits({sendToolkitData, toolkits, env}) {
           </button>
         </div>}
         {toolkits && toolkits.length > 0 ? (
-          <div className="vertical_selection_scroll">
+          <div className={`${env === "PROD" ? 'h_calc_add40' : 'h_80vh'} ${"overflowY_scroll"}`}>
           {toolkits.map((tool, index) =>
               tool.name !== null && !excludedToolkits().includes(tool.name) && (
                 <div key={index} className="item_box mb_10" onClick={() => sendToolkitData(tool)}>

gui/pages/_app.css

@@ -1084,7 +1084,9 @@ p {
 .h_auto{height: auto}
 .h_60vh{height: 60vh}
 .h_75vh{height: 75vh}
+.h_80vh{height: 80vh}
 .h_calc92{height: calc(100vh - 92px)}
+.h_calc_add40{height: calc(80vh + 40px)}
 
 .mxh_78vh{max-height: 78vh}
 
@@ -1509,7 +1511,7 @@ tr{
 .item_publisher {
     font-style: normal;
     font-weight: 500;
-    font-size: 9px;
+    font-size: 11px;
     line-height: 12px;
     display: flex;
     align-items: center;