Add StickyHeader Component and introduce clsx for merging tailwind classNames

frontend/src/components/basics/PasswordField.tsx

@@ -1,16 +1,18 @@
 import {Eye, EyeOff} from "lucide-react";
 import {useState} from "react";
 import {defaultIconSize} from "./SvgIcon";
+import clsx from "clsx";
 
 type PasswordFieldProps = {
     onPasswordChanged: (password: string) => void
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    className?: string
 }
 
 /**
  * Password field component
  */
-export default function PasswordField({onPasswordChanged, onKeyDown}: PasswordFieldProps) {
+export default function PasswordField({onPasswordChanged, onKeyDown, className = ""}: PasswordFieldProps) {
     const [showPassword, setShowPassword] = useState(false);
     const [password, setPassword] = useState<string>("");
 
@@ -19,7 +21,9 @@ export default function PasswordField({onPasswordChanged, onKeyDown}: PasswordFi
         onPasswordChanged(password)
     }
     return (
-        <div className="relative">
+        <div className={clsx(
+            "relative",
+            className)}>
             <input
                 className="pr-10"
                 type={showPassword ? "text" : "password"}