From 3e9155767b1d5eb13f1ff27a8d7c15bbda5cd5d8 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 29 May 2025 03:57:11 +0530
Subject: [PATCH] (fix:input) placeholder overflow

---
 frontend/src/components/Input.tsx   |  6 +++++-
 frontend/src/settings/Documents.tsx | 12 ++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index a968511c..022c1632 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -60,7 +60,11 @@ const Input = ({
       {placeholder && (
         <label
           htmlFor={id}
-          className={`absolute select-none ${hasValue ? '-top-2.5 left-3 text-xs' : ''} px-2 transition-all peer-placeholder-shown:left-3 peer-placeholder-shown:top-2.5 peer-placeholder-shown:${textSizeStyles[textSize]} pointer-events-none cursor-none text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName}`}
+          className={`absolute select-none ${
+            hasValue ? '-top-2.5 left-3 text-xs' : ''
+          } px-2 transition-all peer-placeholder-shown:left-3 peer-placeholder-shown:top-2.5 peer-placeholder-shown:${
+            textSizeStyles[textSize]
+          } pointer-events-none cursor-none text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
         >
           {placeholder}
           {required && (
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 971e58d1..e94d287d 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -312,7 +312,7 @@ export default function Documents({
             />
           </div>
           <button
-            className="flex h-[32px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
+            className="flex h-[32px] min-w-[108px] items-center justify-center whitespace-normal rounded-full bg-purple-30 px-4 text-sm text-white hover:bg-violets-are-blue"
             title={t('settings.documents.addNew')}
             onClick={() => {
               setIsOnboarding(false);
@@ -641,11 +641,11 @@ function DocumentChunks({
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-        <p className="mt-px">Back to all documents</p>
+        <p className="mt-px">{t('settings.documents.backToAll')}</p>
       </div>
       <div className="my-3 flex items-center justify-between gap-1">
         <div className="flex w-full items-center gap-2 text-eerie-black dark:text-bright-gray sm:w-auto">
-          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} Chunks`}</p>
+          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} ${t('settings.documents.chunks')}`}</p>
           <label htmlFor="chunk-search-input" className="sr-only">
             {t('settings.documents.searchPlaceholder')}
           </label>
@@ -663,7 +663,7 @@ function DocumentChunks({
           />
         </div>
         <button
-          className="flex h-[32px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
+          className="flex h-[32px] min-w-[108px] items-center justify-center whitespace-normal rounded-full bg-purple-30 px-4 text-sm text-white hover:bg-violets-are-blue"
           title={t('settings.documents.addNew')}
           onClick={() => setAddModal('ACTIVE')}
         >
@@ -687,10 +687,10 @@ function DocumentChunks({
             <div className="col-span-2 mt-24 text-center text-gray-500 dark:text-gray-400 lg:col-span-3">
               <img
                 src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                alt="No tools found"
+                alt={t('settings.documents.noChunksAlt')}
                 className="mx-auto mb-2 h-24 w-24"
               />
-              No chunks found
+              {t('settings.documents.noChunks')}
             </div>
           ) : (
             paginatedChunks