Fix: Select Modal Layout & Collapse Button Detect Region Check

Author: ShenKSPZ

src/components/chat/ChatHistoryList.tsx

@@ -74,6 +74,7 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
 
   const inputRef = useRef<HTMLInputElement>(null);
   const sidebarRef = useRef<HTMLDivElement>(null);
+  const toggleButtonRef = useRef<HTMLButtonElement>(null);
 
   // Focus input when editing
   useEffect(() => {
@@ -109,14 +110,19 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
       if (!sidebarRef.current || isButtonHovered) return;
 
       // Get sidebar element dimensions and position
-      const rect = sidebarRef.current.getBoundingClientRect();
+      const rect = toggleButtonRef.current?.getBoundingClientRect();
+      if (!rect) return;
       const sidebarRight = rect.right;
+      const sidebarYCenter = rect.top + rect.height / 2;
 
       // Define the sensitivity area (how close the mouse needs to be to show the button)
-      const sensitivityArea = 40; // pixels
+      const sensitivityArea = 70; // pixels
 
       // Check if mouse is within the sensitivity area
-      const isNearToggle = Math.abs(e.clientX - sidebarRight) < sensitivityArea;
+      const isNearToggle = Math.abs(e.clientX - sidebarRight) < sensitivityArea
+        && Math.abs(e.clientY - sidebarYCenter) < sensitivityArea;
+
+      console.log('isNearToggle', isNearToggle);
 
       // Only update if the value is different to avoid unnecessary re-renders
       if (isNearToggle !== isButtonVisible) {
@@ -219,7 +225,8 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
     if (!sidebarRef.current) return;
 
     const rect = sidebarRef.current.getBoundingClientRect();
-    const isNearToggle = Math.abs(mousePosition.x - rect.right) < 40;
+    const isNearToggle = Math.abs(mousePosition.x - rect.right) < 40
+      && Math.abs(mousePosition.y - rect.top) < 40;
 
     if (!isNearToggle && !isSidebarHovered) {
       setIsButtonVisible(false);
@@ -238,7 +245,9 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
     if (!isButtonHovered) {
       const rect = sidebarRef.current?.getBoundingClientRect();
       if (rect) {
-        const isNearToggle = Math.abs(mousePosition.x - rect.right) < 40;
+        const isNearToggle = Math.abs(mousePosition.x - rect.right) < 40
+          && Math.abs(mousePosition.y - rect.top) < 40;
+          
         if (!isNearToggle) {
           setIsButtonVisible(false);
         }
@@ -408,12 +417,13 @@ export const ChatHistoryList: React.FC<ChatHistoryListProps> = ({
 
       {/* Collapse toggle button */}
       <button 
+        ref={toggleButtonRef}
         onClick={toggleSidebar}
         onMouseEnter={handleButtonMouseEnter}
         onMouseLeave={handleButtonMouseLeave}
         onFocus={() => setIsButtonVisible(true)}
         onBlur={() => !isSidebarHovered && setIsButtonVisible(false)}
-        className={`absolute z-10 flex items-center justify-center w-6 h-20 transform -translate-y-1/2 bg-gray-200 -right-6 top-1/2 hover:bg-gray-300 rounded-r-md transition-opacity duration-300 ${isButtonVisible || isButtonHovered ? 'opacity-100' : 'opacity-0'}`}
+        className={`absolute chat-history-list-collapse-button z-10 flex items-center justify-center w-6 h-20 transform -translate-y-1/2 -right-6 top-1/2 rounded-r-md transition-opacity duration-300 ${isButtonVisible || isButtonHovered ? 'opacity-100' : 'opacity-0'}`}
         aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
         title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       >

src/components/models/SelectModelDialog.tsx

@@ -115,7 +115,7 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
       onClick={onClose}
     >
       <div 
-        className="flex flex-col w-3/4 p-4 h-4/5 select-model-dialog move-in"
+        className="flex flex-col w-1/2 p-4 min-h-[500px] min-w-[560px] overflow-hidden h-3/5 select-model-dialog move-in"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between pb-2 border-b frame-separator-border-color">
@@ -129,8 +129,8 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
           </button>
         </div>
 
-        <div className="flex items-center justify-between p-4 border-b frame-separator-border-color">
-          <div className="relative flex-1 max-w-md">
+        <div className="flex items-center justify-between w-full px-8 py-4 border-b frame-separator-border-color">
+          <div className="relative flex-1 w-full">
             <input
               type="text"
               placeholder="Search models..."
@@ -156,18 +156,18 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
           </button> */}
         </div>
 
-        <div className="flex-1 p-4 overflow-y-auto">
+        <div className="relative flex-1 p-4 max-h-[70%] overflow-y-auto">
           {isLoading && models.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-64">
+            <div className="flex flex-col items-center justify-center h-full">
               <Loader2 className="mb-4 text-4xl text-blue-500 animate-spin" size={40} />
               <p className="text-gray-400">Loading available models...</p>
             </div>
           ) : filteredModels.length === 0 ? (
-            <div className="py-8 text-center text-gray-400">
+            <div className="flex items-center justify-center h-full text-gray-400">
               {searchQuery ? 'No models match your search' : 'No models available'}
             </div>
           ) : (
-            <div className="space-y-6">
+            <div className="flex flex-col h-full">
               {Object.entries(groupedModels).map(([providerId, providerModels]) => (
                 <div key={providerId} className="mb-6">
 

src/components/settings/ApiManagement.tsx

@@ -374,7 +374,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
             </div>
 
             <div className="sticky bottom-0 w-full">
-              <button onClick={() => onAddCustomProvider()} className="flex items-center w-full px-4 py-2 settings-add-custom-provider-btn">
+              <button onClick={() => onAddCustomProvider()} className="flex items-center justify-center w-full px-4 py-2 settings-add-custom-provider-btn">
                 <Plus size={16} className="mr-2 text-base" />
                 <span>Add Custom Provider</span>
               </button>

src/styles/tensorblock-light.css

@@ -23,7 +23,6 @@
     --green-200: #C7F4D7;
     --green-500: #46C173;
     --green-600: #3AA461;
-
 }
 
 @layer base {
@@ -543,5 +542,17 @@
         background-color: var(--primary-200);
         color: var(--primary-700);
     }
+
+    .chat-history-list-collapse-button {
+        background-color: var(--primary-100);
+    }
+
+    .chat-history-list-collapse-button:hover {
+        background-color: var(--primary-200);
+    }
+
+    .chat-history-list-collapse-button:active {
+        background-color: var(--primary-300);
+    }
 
 }