diff --git a/frontend/src/FileManager/FileList/FileItem.jsx b/frontend/src/FileManager/FileList/FileItem.jsx
index 1666960..adb2400 100644
--- a/frontend/src/FileManager/FileList/FileItem.jsx
+++ b/frontend/src/FileManager/FileList/FileItem.jsx
@@ -212,6 +212,7 @@ const FileItem = ({
id={file.name}
checked={fileSelected}
className={`selection-checkbox ${checkboxClassName}`}
+ labelClassName={`selection-checkbox-label`}
onChange={handleCheckboxChange}
onClick={(e) => e.stopPropagation()}
/>
diff --git a/frontend/src/FileManager/FileList/FileList.scss b/frontend/src/FileManager/FileList/FileList.scss
index d20b226..55137de 100644
--- a/frontend/src/FileManager/FileList/FileList.scss
+++ b/frontend/src/FileManager/FileList/FileList.scss
@@ -67,10 +67,15 @@
background-color: $item-hover-color;
}
- .selection-checkbox {
+ .selection-checkbox-label {
position: absolute;
- left: 5px;
- top: 8px;
+ top: 0;
+ left: 0;
+ padding: 8px 5px;
+ }
+
+ .selection-checkbox {
+ position: static;
}
.hidden {
@@ -199,8 +204,13 @@
background-color: unset;
}
+ .selection-checkbox-label {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+
.selection-checkbox {
- top: 12px;
+ position: static;
}
.file-name {
diff --git a/frontend/src/components/Checkbox/Checkbox.jsx b/frontend/src/components/Checkbox/Checkbox.jsx
index 7e804b6..c9e6a25 100644
--- a/frontend/src/components/Checkbox/Checkbox.jsx
+++ b/frontend/src/components/Checkbox/Checkbox.jsx
@@ -1,18 +1,19 @@
import "./Checkbox.scss";
-const Checkbox = ({ name, id, checked, onClick, onChange, className = "", title, disabled = false }) => {
+const Checkbox = ({ name, id, checked, onClick, onChange, className = "", labelClassName = "", title, disabled = false }) => {
return (
-
+
);
};