Tweak look

src/shared/components/common/password-input.tsx

@@ -12,7 +12,6 @@ interface PasswordInputProps {
   onInput: FormEventHandler<HTMLInputElement>;
   className?: string;
   showStrength?: boolean;
-  cols?: number | null;
   label?: string;
   showForgotLink?: boolean;
 }
@@ -72,7 +71,6 @@ class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
         onInput,
         className,
         showStrength,
-        cols = 10,
         label,
         showForgotLink,
       },
@@ -81,24 +79,13 @@ class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
 
     return (
       <>
-        <div
-          className={classNames(className, {
-            row: !!cols,
-          })}
-        >
+        <div className={classNames("row", className)}>
           {label && (
-            <label
-              className={`col-sm-${12 - (cols ?? 0)} col-form-label`}
-              htmlFor={id}
-            >
+            <label className="col-sm-2 col-form-label" htmlFor={id}>
               {label}
             </label>
           )}
-          <div
-            className={classNames({
-              [`col-sm-${cols}`]: !!cols,
-            })}
-          >
+          <div className={`col-sm-${label ? 10 : 12}`}>
             <div className="input-group">
               <input
                 type={show ? "text" : "password"}

src/shared/components/person/settings.tsx

@@ -324,7 +324,6 @@ export class Settings extends Component<any, SettingsState> {
               id="new-password"
               value={this.state.changePasswordForm.new_password}
               onInput={linkEvent(this, this.handleNewPasswordChange)}
-              cols={7}
               showStrength
               label={I18NextService.i18n.t("new_password") ?? undefined}
             />
@@ -334,7 +333,6 @@ export class Settings extends Component<any, SettingsState> {
               id="verify-new-password"
               value={this.state.changePasswordForm.new_password_verify}
               onInput={linkEvent(this, this.handleNewPasswordVerifyChange)}
-              cols={7}
               label={I18NextService.i18n.t("verify_password") ?? undefined}
             />
           </div>
@@ -343,7 +341,6 @@ export class Settings extends Component<any, SettingsState> {
               id="user-old-password"
               value={this.state.changePasswordForm.old_password}
               onInput={linkEvent(this, this.handleOldPasswordChange)}
-              cols={7}
               label={I18NextService.i18n.t("old_password") ?? undefined}
             />
           </div>
@@ -788,7 +785,7 @@ export class Settings extends Component<any, SettingsState> {
             </button>
           </div>
           <hr />
-          <div className="input-group mb-3">
+          <div className="mb-3">
             <button
               className="btn d-block btn-danger"
               onClick={linkEvent(
@@ -815,7 +812,6 @@ export class Settings extends Component<any, SettingsState> {
                     this.handleDeleteAccountPasswordChange
                   )}
                   className="my-2"
-                  cols={null}
                 />
                 <button
                   className="btn btn-danger me-4"