(fix:chunks) responsive design

2025-11-29 16:43:16 +00:00 · 2025-07-21 16:30:30 +05:30
parent f336d44595
commit 3755316d49
2 changed files with 63 additions and 59 deletions
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -152,30 +152,30 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
  return (
    <div className={`${showHeader ? 'mt-8' : 'mt-0'} flex flex-col`}>
      {showHeader && (
-        <div className="mb-4 flex items-center">
+        <div className="mb-4 flex items-center overflow-hidden">
          <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
            onClick={handleGoBack}
          >
            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
          </button>

-          <div className="flex items-center">
-            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
-            <span className="text-[#7D54D1] font-semibold text-base leading-6">
+          <div className="flex items-center overflow-hidden">
+            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
+            <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
              {documentName}
            </span>

            {pathParts.length > 0 && (
              <>
-                <span className="mx-1 text-gray-500">/</span>
+                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                {pathParts.map((part, index) => (
                  <React.Fragment key={index}>
-                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
+                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
                      {part}
                    </span>
                    {index < pathParts.length - 1 && (
-                      <span className="mx-1 text-gray-500">/</span>
+                      <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                    )}
                  </React.Fragment>
                ))}
@@ -185,8 +185,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
        </div>
      )}

-      <div className="mb-3 flex items-center justify-between gap-3">
-        <div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
+      <div className="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+        <div className="flex-1 w-full flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
          <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
            {totalChunks > 999999
              ? `${(totalChunks / 1000000).toFixed(2)}M`
@@ -206,7 +206,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
          </div>
        </div>
        <button
-          className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white shrink-0"
+          className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white shrink-0"
          title={t('settings.documents.addNew')}
          onClick={() => setAddModal('ACTIVE')}
        >
@@ -214,28 +214,26 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
        </button>
      </div>
      {loading ? (
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
-            <Spinner />
-          </div>
-        </div>
-      ) : (
-        <div className="flex flex-wrap gap-4">
-          {filteredChunks.length === 0 ? (
-            <div className="w-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
-              <img
-                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                alt={t('settings.documents.noChunksAlt')}
-                className="mx-auto mb-2 h-24 w-24"
-              />
-              {t('settings.documents.noChunks')}
-            </div>
-          ) : (
-            filteredChunks.map((chunk, index) => (
-              <div
-                key={index}
-                className="relative flex h-[208px] w-[400px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden"
-              >
+  <div className="w-full mt-24 flex justify-center">
+    <Spinner />
+  </div>
+) : (
+  <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+    {filteredChunks.length === 0 ? (
+      <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
+        <img
+          src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+          alt={t('settings.documents.noChunksAlt')}
+          className="mx-auto mb-2 h-24 w-24"
+        />
+        {t('settings.documents.noChunks')}
+      </div>
+    ) : (
+      filteredChunks.map((chunk, index) => (
+        <div
+          key={index}
+          className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+        >
                <div className="w-full">
                  <div className="flex w-full items-center justify-between border-b border-[#D1D9E0] bg-[#F6F8FA] dark:bg-[#27282D] dark:border-[#6A6A6A] px-4 py-3">
                    <div className="text-[#59636E] text-sm dark:text-[#E0E0E0]">
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -436,6 +436,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
    setSearchResults([]);
  };

+
  return (
    <>
      <div className="mb-4">{renderPathNavigation()}</div>
@@ -465,24 +466,29 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
              />

              {searchQuery && (
-                <div className="absolute z-10 w-full border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-b-md bg-white dark:bg-[#1F2023] shadow-lg max-h-[calc(100vh-200px)] overflow-y-auto" style={{ marginTop: "-1px", borderTop: "none", borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
-                  {searchResults.map((result, index) => (
-                    <div
-                      key={index}
-                      onClick={() => handleSearchSelect(result)}
-                      className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
-                        }`}
-                    >
-                      <img
-                        src={result.isFile ? FileIcon : FolderIcon}
-                        alt={result.isFile ? "File" : "Folder"}
-                        className="w-4 h-4 mr-2"
-                      />
-                      <span className="text-sm truncate dark:text-[#E0E0E0]">
-                        {result.path}
-                      </span>
-                    </div>
-                  ))}
+                <div className="absolute z-10 w-full border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-b-md bg-white dark:bg-[#1F2023] shadow-lg max-h-[calc(100vh-200px)] overflow-y-auto">
+                  {searchResults.map((result, index) => {
+                    const name = result.path.split('/').pop() || result.path;
+
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => handleSearchSelect(result)}
+                        title={result.path}
+                        className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
+                          }`}
+                      >
+                        <img
+                          src={result.isFile ? FileIcon : FolderIcon}
+                          alt={result.isFile ? "File" : "Folder"}
+                          className="flex-shrink-0 w-4 h-4 mr-2"
+                        />
+                        <span className="text-sm dark:text-[#E0E0E0]">
+                          {name}
+                        </span>
+                      </div>
+                    );
+                  })}
                  {searchResults.length === 0 && (
                    <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
                      {t('settings.documents.noResults')}
@@ -493,14 +499,14 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
            </div>
          </div>
          <div className="flex-1 pl-4 pt-0">
-      <DocumentChunks
-        documentId={docId}
-        documentName={sourceName}
-        handleGoBack={() => setSelectedFile(null)}
-        path={selectedFile.id}
-        showHeader={false}
-      />
-    </div>
+            <DocumentChunks
+              documentId={docId}
+              documentName={sourceName}
+              handleGoBack={() => setSelectedFile(null)}
+              path={selectedFile.id}
+              showHeader={false}
+            />
+          </div>
        </div>
      ) : (
        <div className="mt-8 flex flex-col">