Saifullah-dev · Saifullah-dev · Aug 21, 2025 · Aug 21, 2025
diff --git a/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx b/frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx
@@ -135,6 +135,7 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
   return (
     <>
       <NameInput
+        id="newFolder"
         nameInputRef={outsideClick.ref}
         maxLength={maxNameLength}
         value={folderName}

diff --git a/frontend/src/FileManager/Actions/Delete/Delete.action.scss b/frontend/src/FileManager/Actions/Delete/Delete.action.scss
@@ -1,3 +1,5 @@
+@import "../../../styles/variables";
+
 .file-delete-confirm {
     .file-delete-confirm-text {
         border-bottom: 1px solid #dddddd;
@@ -6,6 +8,7 @@
         margin-bottom: .7rem;
         word-wrap: break-word;
         font-weight: 500;
+        font-size: $fm-font-size;
     }
 
     .file-delete-confirm-actions {

diff --git a/frontend/src/FileManager/Actions/PreviewFile/PreviewFile.action.scss b/frontend/src/FileManager/Actions/PreviewFile/PreviewFile.action.scss
@@ -1,8 +1,11 @@
+@import "../../../styles/variables";
+
 .file-previewer {
     padding: .8em;
     height: 40dvh;
     display: flex;
     justify-content: center;
+    font-size: $fm-font-size;
 
     .photo-popup-image {
         object-fit: contain;

diff --git a/frontend/src/FileManager/Actions/Rename/Rename.action.jsx b/frontend/src/FileManager/Actions/Rename/Rename.action.jsx
@@ -156,6 +156,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
   return (
     <>
       <NameInput
+        id={file.name}
         nameInputRef={outsideClick.ref}
         maxLength={maxNameLength}
         value={renameFile}

diff --git a/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.scss b/frontend/src/FileManager/Actions/UploadFile/UploadFile.action.scss
@@ -4,6 +4,7 @@
     padding: 18px 15px;
     display: flex;
     gap: 18px;
+    font-size: $fm-font-size;
 
     .select-files {
         width: 100%;
@@ -55,7 +56,7 @@
     }
 
     .files-progress {
-        width: 60%;
+        width: calc(60% - 18px);
 
         .heading {
             display: flex;
@@ -80,7 +81,7 @@
                 list-style: none;
                 border-bottom: 1px solid #c6c6c6;
                 display: flex;
-                gap: 5px;
+                gap: 10px;
                 margin-bottom: 18px;
                 padding-bottom: 12px;
 
@@ -89,7 +90,7 @@
                 }
 
                 .file {
-                    width: 90%;
+                    width: 86%;
 
                     .file-details {
                         display: flex;
@@ -104,7 +105,7 @@
 
                             .file-name {
                                 display: inline-block;
-                                max-width: 72%;
+                                max-width: 66%;
                                 margin-right: 8px;
                             }
                         }

diff --git a/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss b/frontend/src/FileManager/BreadCrumb/BreadCrumb.scss
@@ -2,6 +2,7 @@
 
 .bread-crumb-container {
   position: relative;
+  font-size: $fm-font-size;
 
   .breadcrumb {
     height: 22px;

diff --git a/frontend/src/FileManager/FileList/FileList.scss b/frontend/src/FileManager/FileList/FileList.scss
@@ -11,6 +11,7 @@
   @include overflow-y-scroll;
   padding: 8px;
   padding-right: 4px;
+  font-size: $fm-font-size;
 
   .drag-move-tooltip {
     background-color: white;
@@ -158,11 +159,11 @@
       padding-left: 35px;
       cursor: pointer;
       user-select: none;
-      
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1);
       }
-      
+
       &.active {
         background-color: rgba(0, 123, 255, 0.1);
         color: #007bff;
@@ -174,11 +175,11 @@
       width: 20%;
       cursor: pointer;
       user-select: none;
-      
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1);
       }
-      
+
       &.active {
         background-color: rgba(0, 123, 255, 0.1);
         color: #007bff;
@@ -190,17 +191,17 @@
       width: 10%;
       cursor: pointer;
       user-select: none;
-      
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1);
       }
-      
+
       &.active {
         background-color: rgba(0, 123, 255, 0.1);
         color: #007bff;
       }
     }
-    
+
     .sort-indicator {
       font-size: 0.8em;
       margin-left: 4px;

diff --git a/frontend/src/FileManager/FileList/FilesHeader.jsx b/frontend/src/FileManager/FileList/FilesHeader.jsx
@@ -36,44 +36,44 @@ const FilesHeader = ({ unselectFiles, onSort, sortConfig }) => {
     >
       <div className="file-select-all">
         {(showSelectAll || allFilesSelected) && (
-          <Checkbox checked={allFilesSelected} onChange={handleSelectAll} title="Select all" disabled={currentPathFiles.length === 0} />
+          <Checkbox
+            id="selectAll"
+            checked={allFilesSelected}
+            onChange={handleSelectAll}
+            title="Select all"
+            disabled={currentPathFiles.length === 0}
+          />
         )}
       </div>
-      <div 
-        className={`file-name ${sortConfig?.key === 'name' ? 'active' : ''}`} 
-        onClick={() => handleSort('name')}
+      <div
+        className={`file-name ${sortConfig?.key === "name" ? "active" : ""}`}
+        onClick={() => handleSort("name")}
       >
         Name
-        {sortConfig?.key === 'name' && (
-          <span className="sort-indicator">
-            {sortConfig.direction === 'asc' ? ' ▲' : ' ▼'}
-          </span>
+        {sortConfig?.key === "name" && (
+          <span className="sort-indicator">{sortConfig.direction === "asc" ? " ▲" : " ▼"}</span>
         )}
       </div>
-      <div 
-        className={`file-date ${sortConfig?.key === 'modified' ? 'active' : ''}`} 
-        onClick={() => handleSort('modified')}
+      <div
+        className={`file-date ${sortConfig?.key === "modified" ? "active" : ""}`}
+        onClick={() => handleSort("modified")}
       >
         Modified
-        {sortConfig?.key === 'modified' && (
-          <span className="sort-indicator">
-            {sortConfig.direction === 'asc' ? ' ▲' : ' ▼'}
-          </span>
+        {sortConfig?.key === "modified" && (
+          <span className="sort-indicator">{sortConfig.direction === "asc" ? " ▲" : " ▼"}</span>
         )}
       </div>
-      <div 
-        className={`file-size ${sortConfig?.key === 'size' ? 'active' : ''}`} 
-        onClick={() => handleSort('size')}
+      <div
+        className={`file-size ${sortConfig?.key === "size" ? "active" : ""}`}
+        onClick={() => handleSort("size")}
       >
         Size
-        {sortConfig?.key === 'size' && (
-          <span className="sort-indicator">
-            {sortConfig.direction === 'asc' ? ' ▲' : ' ▼'}
-          </span>
+        {sortConfig?.key === "size" && (
+          <span className="sort-indicator">{sortConfig.direction === "asc" ? " ▲" : " ▼"}</span>
         )}
       </div>
     </div>
   );
 };
 
-export default FilesHeader;
+export default FilesHeader;
diff --git a/frontend/src/FileManager/FileManager.scss b/frontend/src/FileManager/FileManager.scss
@@ -109,6 +109,7 @@ svg {
 
 .fm-rename-folder-container {
   padding: 8px 0;
+  text-align: left;
 
   .fm-rename-folder-input {
     border-bottom: 1px solid #c6c6c6;

diff --git a/frontend/src/FileManager/NavigationPane/NavigationPane.scss b/frontend/src/FileManager/NavigationPane/NavigationPane.scss
@@ -4,6 +4,7 @@
   list-style: none;
   margin: 0px 4px;
   height: 100%;
+  font-size: $fm-font-size;
   @include overflow-y-scroll;
 
   .folder-collapsible {

diff --git a/frontend/src/FileManager/Toolbar/Toolbar.scss b/frontend/src/FileManager/Toolbar/Toolbar.scss
@@ -58,6 +58,7 @@
       margin: 0;
       border: 1px solid #c4c4c4;
       border-radius: 5px;
+      font-size: $fm-font-size;
 
       ul {
         list-style: none;

diff --git a/frontend/src/components/ContextMenu/ContextMenu.scss b/frontend/src/components/ContextMenu/ContextMenu.scss
@@ -8,6 +8,7 @@
   padding: 4px;
   z-index: 1;
   transition: opacity 0.1s linear;
+  font-size: $fm-font-size;
 
   .file-context-menu-list {
     font-size: 1.1em;

diff --git a/frontend/src/components/Modal/Modal.scss b/frontend/src/components/Modal/Modal.scss
@@ -6,6 +6,7 @@
   align-items: center;
   border-bottom: 1px solid $border-color;
   padding: 0.3rem 1rem;
+  font-size: $fm-font-size;
 
   .fm-modal-heading {
     margin: 0;

diff --git a/frontend/src/components/NameInput/NameInput.jsx b/frontend/src/components/NameInput/NameInput.jsx
@@ -1,9 +1,10 @@
 import "./NameInput.scss";
 
-const NameInput = ({ nameInputRef, maxLength, value, onChange, onKeyDown, onClick, rows }) => {
+const NameInput = ({ nameInputRef, id, maxLength, value, onChange, onKeyDown, onClick, rows }) => {
   return (
     <textarea
       ref={nameInputRef}
+      id={id}
       className="rename-file"
       maxLength={maxLength}
       value={value}

diff --git a/frontend/src/components/NameInput/NameInput.scss b/frontend/src/components/NameInput/NameInput.scss
@@ -11,6 +11,7 @@
     resize: none;
     field-sizing: content;
     overflow-y: hidden;
+    z-index: 1;
 
     &:focus {
         outline: none;

diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss
@@ -1,6 +1,7 @@
 // App Colors
 $border-color: #cfcfcf;
 $item-hover-color: rgb(0, 0, 0, 0.05);
+$fm-font-size: 16px;
 //
 
 // Resuable Styles