From 174c745279f7f27b2283318695060184468641ab Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Sun, 9 Apr 2023 23:35:45 +0800
Subject: [PATCH] fix: #648 password input style

---
 app/components/settings.module.scss | 7 ++++++-
 app/components/settings.tsx         | 8 ++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/components/settings.module.scss b/app/components/settings.module.scss
index 7d40d83b8..830e1baeb 100644
--- a/app/components/settings.module.scss
+++ b/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%;
+  }
 }
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 0d1c1d05c..15fe58398 100644
--- a/app/components/settings.tsx
+++ b/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>
   );
 }