Browse Source

fix: #648 password input style

Yidadaa 2 years ago
parent
commit
174c745279
2 changed files with 12 additions and 3 deletions
  1. 6 1
      app/components/settings.module.scss
  2. 6 2
      app/components/settings.tsx

+ 6 - 1
app/components/settings.module.scss

@@ -19,11 +19,16 @@
   cursor: pointer;
 }
 
-.password-input {
+.password-input-container {
+  max-width: 50%;
   display: flex;
   justify-content: flex-end;
 
   .password-eye {
     margin-right: 4px;
   }
+
+  .password-input {
+    min-width: 80%;
+  }
 }

+ 6 - 2
app/components/settings.tsx

@@ -60,13 +60,17 @@ function PasswordInput(props: HTMLProps<HTMLInputElement>) {
   }
 
   return (
-    <div className={styles["password-input"]}>
+    <div className={styles["password-input-container"]}>
       <IconButton
         icon={visible ? <EyeIcon /> : <EyeOffIcon />}
         onClick={changeVisibility}
         className={styles["password-eye"]}
       />
-      <input {...props} type={visible ? "text" : "password"} />
+      <input
+        {...props}
+        type={visible ? "text" : "password"}
+        className={styles["password-input"]}
+      />
     </div>
   );
 }