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 ( - + ); };