(fix:responsive) tools and source pop

2025-11-30 00:53:14 +00:00 · 2025-03-28 20:40:46 +05:30
parent 7c92558ad1
commit 727a8ef13d
2 changed files with 222 additions and 187 deletions
--- a/frontend/src/components/ToolsPopup.tsx
+++ b/frontend/src/components/ToolsPopup.tsx
@@ -29,7 +29,7 @@ export default function ToolsPopup({
  const [searchTerm, setSearchTerm] = useState('');
  const [isDarkTheme] = useDarkTheme();
  const popupRef = useRef<HTMLDivElement>(null);
-  const [popupPosition, setPopupPosition] = useState({ bottom: 0, left: 0 });
+  const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0, maxHeight: 0, showAbove: false });

  useLayoutEffect(() => {
    if (!isOpen || !anchorRef.current) return;
@@ -38,15 +38,24 @@ export default function ToolsPopup({
      if (!anchorRef.current) return;
      
      const rect = anchorRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+      
+      const spaceAbove = rect.top;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const showAbove = spaceAbove > spaceBelow && spaceAbove >= 300;
+      const maxHeight = showAbove ? spaceAbove - 16 : spaceBelow - 16;
+
+      const left = Math.min(
+        rect.left,
+        viewportWidth - Math.min(462, viewportWidth * 0.95) - 10
+      );
+      
      setPopupPosition({
-        bottom: Math.min(
-          window.innerHeight - rect.top + 10,
-          window.innerHeight - 20
-        ),
-        left: Math.min(
-          rect.left,
-          window.innerWidth - Math.min(462, window.innerWidth * 0.95) - 10
-        )
+        top: showAbove ? rect.top - 8 : rect.bottom + 8,
+        left,
+        maxHeight: Math.min(600, maxHeight),
+        showAbove
      });
    };
    
@@ -67,11 +76,13 @@ export default function ToolsPopup({
      }
    };

-    document.addEventListener('mousedown', handleClickOutside);
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
-  }, [onClose, anchorRef]);
+  }, [onClose, anchorRef, isOpen]);

  useEffect(() => {
    if (isOpen) {
@@ -113,45 +124,51 @@ export default function ToolsPopup({

  if (!isOpen) return null;

+  const filteredTools = userTools.filter((tool) =>
+    tool.displayName.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
  return (
    <div
      ref={popupRef}
-      className="absolute z-10 w-[462px] max-w-[95vw] rounded-lg border border-light-silver dark:border-dim-gray bg-lotion dark:bg-charleston-green-2 shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
+      className="fixed z-[9999] rounded-lg border border-light-silver dark:border-dim-gray bg-lotion dark:bg-charleston-green-2 shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
      style={{
-        bottom: popupPosition.bottom,
+        top: popupPosition.showAbove ? popupPosition.top : undefined,
+        bottom: popupPosition.showAbove ? undefined : window.innerHeight - popupPosition.top,
        left: popupPosition.left,
-        position: 'fixed',
-        zIndex: 9999,
+        maxWidth: Math.min(462, window.innerWidth * 0.95),
+        width: '100%',
+        height: popupPosition.maxHeight,
+        transform: popupPosition.showAbove ? 'translateY(-100%)' : 'none',
      }}
    >
-      <div className="p-4">
-        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
-          {t('settings.tools.label')}
-        </h3>
+      <div className="flex flex-col h-full">
+        <div className="p-4 flex-shrink-0">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+            {t('settings.tools.label')}
+          </h3>

-        <Input
-          id="tool-search"
-          name="tool-search"
-          type="text"
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          placeholder={t('settings.tools.searchPlaceholder')}
-          labelBgClassName="bg-lotion dark:bg-charleston-green-2"
-          borderVariant="thin"
-          className="mb-4"
-        />
+          <Input
+            id="tool-search"
+            name="tool-search"
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder={t('settings.tools.searchPlaceholder')}
+            labelBgClassName="bg-lotion dark:bg-charleston-green-2"
+            borderVariant="thin"
+            className="mb-4"
+          />
+        </div>

        {loading ? (
-          <div className="flex justify-center py-4">
+          <div className="flex justify-center py-4 flex-grow">
            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
          </div>
        ) : (
-          <div className="border border-[#D9D9D9] dark:border-dim-gray rounded-md overflow-hidden">
-            <div 
-              className="h-[calc(min(480px,100vh-220px))] overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]"
-             
-            >
-              {userTools.length === 0 ? (
+          <div className="mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md overflow-hidden flex-grow">
+            <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
+              {filteredTools.length === 0 ? (
                <div className="flex flex-col items-center justify-center h-full py-8">
                  <img
                    src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
@@ -163,50 +180,44 @@ export default function ToolsPopup({
                  </p>
                </div>
              ) : (
-                userTools
-                  .filter((tool) =>
-                    tool.displayName
-                      .toLowerCase()
-                      .includes(searchTerm.toLowerCase()),
-                  )
-                  .map((tool) => (
-                    <div
-                      key={tool.id}
-                      onClick={() => updateToolStatus(tool.id, !tool.status)}
-                      className="flex items-center justify-between p-3 border-b border-[#D9D9D9] dark:border-dim-gray hover:bg-gray-100 dark:hover:bg-charleston-green-3"
-                    >
-                      <div className="flex items-center flex-grow mr-3">
-                        <img
-                          src={`/toolIcons/tool_${tool.name}.svg`}
-                          alt={`${tool.displayName} icon`}
-                          className="h-5 w-5 mr-4 flex-shrink-0"
-                        />
-                        <div className="overflow-hidden">
-                          <p className="text-xs font-medium text-gray-900 dark:text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
-                            {tool.displayName}
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex items-center flex-shrink-0">
-                        <div className={`w-4 h-4 border flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
-                          {tool.status && (
-                            <img
-                              src={CheckmarkIcon}
-                              alt="Tool enabled"
-                              width={12}
-                              height={12}
-                            />
-                          )}
-                        </div>
+                filteredTools.map((tool) => (
+                  <div
+                    key={tool.id}
+                    onClick={() => updateToolStatus(tool.id, !tool.status)}
+                    className="flex items-center justify-between p-3 border-b border-[#D9D9D9] dark:border-dim-gray hover:bg-gray-100 dark:hover:bg-charleston-green-3"
+                  >
+                    <div className="flex items-center flex-grow mr-3">
+                      <img
+                        src={`/toolIcons/tool_${tool.name}.svg`}
+                        alt={`${tool.displayName} icon`}
+                        className="h-5 w-5 mr-4 flex-shrink-0"
+                      />
+                      <div className="overflow-hidden">
+                        <p className="text-xs font-medium text-gray-900 dark:text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+                          {tool.displayName}
+                        </p>
                      </div>
                    </div>
-                  ))
+                    <div className="flex items-center flex-shrink-0">
+                      <div className={`w-4 h-4 border flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                        {tool.status && (
+                          <img
+                            src={CheckmarkIcon}
+                            alt="Tool enabled"
+                            width={12}
+                            height={12}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))
              )}
            </div>
          </div>
        )}

-        <div className="mt-4 flex justify-start">
+        <div className="p-4 flex-shrink-0">
          <a
            href="/settings/tools"
            className="text-base text-purple-30 font-medium hover:text-violets-are-blue flex items-center"
@@ -222,4 +233,4 @@ export default function ToolsPopup({
      </div>
    </div>
  );
-}
+}