From 086f0b6ce23f607d20c2cec3c73b2e4d1ce9b426 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Mon, 14 Mar 2022 03:24:39 -0400
Subject: [PATCH] fix(css): rename form-input to form-input-area (#2613)

---
 .../IssueModal/CreateIssueModal/index.tsx     |  4 +-
 .../NotificationTypeSelector/index.tsx        |  2 +-
 .../ResetPassword/RequestResetLink.tsx        |  2 +-
 src/components/ResetPassword/index.tsx        |  4 +-
 .../Notifications/NotificationsDiscord.tsx    | 10 ++---
 .../Notifications/NotificationsEmail.tsx      | 22 +++++-----
 .../NotificationsGotify/index.tsx             |  6 +--
 .../NotificationsLunaSea/index.tsx            |  6 +--
 .../NotificationsPushbullet/index.tsx         |  6 +--
 .../NotificationsPushover/index.tsx           |  6 +--
 .../NotificationsSlack/index.tsx              |  4 +-
 .../Notifications/NotificationsTelegram.tsx   | 10 ++---
 .../NotificationsWebPush/index.tsx            |  2 +-
 .../NotificationsWebhook/index.tsx            |  8 ++--
 src/components/Settings/RadarrModal/index.tsx | 30 +++++++-------
 .../Settings/SettingsJobsCache/index.tsx      |  2 +-
 src/components/Settings/SettingsMain.tsx      | 20 +++++-----
 src/components/Settings/SettingsPlex.tsx      | 22 +++++-----
 .../Settings/SettingsUsers/index.tsx          | 10 ++---
 src/components/Settings/SonarrModal/index.tsx | 40 +++++++++----------
 src/components/UserList/index.tsx             |  8 ++--
 .../UserGeneralSettings/index.tsx             | 14 +++----
 .../UserNotificationsDiscord.tsx              |  2 +-
 .../UserNotificationsEmail.tsx                |  2 +-
 .../UserNotificationsPushbullet.tsx           |  2 +-
 .../UserNotificationsPushover.tsx             |  4 +-
 .../UserNotificationsTelegram.tsx             |  4 +-
 .../UserSettings/UserPasswordChange/index.tsx |  6 +--
 src/styles/globals.css                        |  2 +-
 29 files changed, 130 insertions(+), 130 deletions(-)

diff --git a/src/components/IssueModal/CreateIssueModal/index.tsx b/src/components/IssueModal/CreateIssueModal/index.tsx
index 7e30ac5f..5dbc4180 100644
--- a/src/components/IssueModal/CreateIssueModal/index.tsx
+++ b/src/components/IssueModal/CreateIssueModal/index.tsx
@@ -177,7 +177,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
                     {intl.formatMessage(messages.problemseason)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -212,7 +212,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
                       {intl.formatMessage(messages.problemepisode)}
                       <span className="label-required">*</span>
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <Field
                           as="select"
diff --git a/src/components/NotificationTypeSelector/index.tsx b/src/components/NotificationTypeSelector/index.tsx
index 2bbdd446..70b003ae 100644
--- a/src/components/NotificationTypeSelector/index.tsx
+++ b/src/components/NotificationTypeSelector/index.tsx
@@ -357,7 +357,7 @@ const NotificationTypeSelector: React.FC<NotificationTypeSelectorProps> = ({
           {intl.formatMessage(messages.notificationTypes)}
           {!user && <span className="label-required">*</span>}
         </span>
-        <div className="form-input">
+        <div className="form-input-area">
           <div className="max-w-lg">
             {availableTypes.map((type) => (
               <NotificationType
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index 22fe34c6..76d2c4a9 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -110,7 +110,7 @@ const ResetPassword: React.FC = () => {
                               name="email"
                               type="text"
                               inputMode="email"
-                              className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+                              className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                           </div>
                           {errors.email && touched.email && (
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 2478e731..a7077b54 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -126,7 +126,7 @@ const ResetPassword: React.FC = () => {
                               name="password"
                               type="password"
                               autoComplete="new-password"
-                              className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+                              className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                           </div>
                           {errors.password && touched.password && (
@@ -147,7 +147,7 @@ const ResetPassword: React.FC = () => {
                               name="confirmPassword"
                               type="password"
                               autoComplete="new-password"
-                              className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+                              className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                           </div>
                           {errors.confirmPassword &&
diff --git a/src/components/Settings/Notifications/NotificationsDiscord.tsx b/src/components/Settings/Notifications/NotificationsDiscord.tsx
index 7373d10e..38d24ba9 100644
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -158,7 +158,7 @@ const NotificationsDiscord: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -183,7 +183,7 @@ const NotificationsDiscord: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="webhookUrl"
@@ -201,7 +201,7 @@ const NotificationsDiscord: React.FC = () => {
               <label htmlFor="botUsername" className="text-label">
                 {intl.formatMessage(messages.botUsername)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="botUsername"
@@ -219,7 +219,7 @@ const NotificationsDiscord: React.FC = () => {
               <label htmlFor="botAvatarUrl" className="text-label">
                 {intl.formatMessage(messages.botAvatarUrl)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="botAvatarUrl"
@@ -237,7 +237,7 @@ const NotificationsDiscord: React.FC = () => {
               <label htmlFor="enableMentions" className="checkbox-label">
                 {intl.formatMessage(messages.enableMentions)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field
                   type="checkbox"
                   id="enableMentions"
diff --git a/src/components/Settings/Notifications/NotificationsEmail.tsx b/src/components/Settings/Notifications/NotificationsEmail.tsx
index 1b81f2d2..40308390 100644
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -237,7 +237,7 @@ const NotificationsEmail: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -245,7 +245,7 @@ const NotificationsEmail: React.FC = () => {
               <label htmlFor="senderName" className="text-label">
                 {intl.formatMessage(messages.senderName)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="senderName" name="senderName" type="text" />
                 </div>
@@ -256,7 +256,7 @@ const NotificationsEmail: React.FC = () => {
                 {intl.formatMessage(messages.emailsender)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="emailFrom"
@@ -275,7 +275,7 @@ const NotificationsEmail: React.FC = () => {
                 {intl.formatMessage(messages.smtpHost)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="smtpHost"
@@ -294,7 +294,7 @@ const NotificationsEmail: React.FC = () => {
                 {intl.formatMessage(messages.smtpPort)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field
                   id="smtpPort"
                   name="smtpPort"
@@ -315,7 +315,7 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.encryptionTip)}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field as="select" id="encryption" name="encryption">
                     <option value="none">
@@ -338,7 +338,7 @@ const NotificationsEmail: React.FC = () => {
               <label htmlFor="allowSelfSigned" className="checkbox-label">
                 {intl.formatMessage(messages.allowselfsigned)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field
                   type="checkbox"
                   id="allowSelfSigned"
@@ -350,7 +350,7 @@ const NotificationsEmail: React.FC = () => {
               <label htmlFor="authUser" className="text-label">
                 {intl.formatMessage(messages.authUser)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="authUser" name="authUser" type="text" />
                 </div>
@@ -360,7 +360,7 @@ const NotificationsEmail: React.FC = () => {
               <label htmlFor="authPass" className="text-label">
                 {intl.formatMessage(messages.authPass)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
@@ -385,7 +385,7 @@ const NotificationsEmail: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
@@ -415,7 +415,7 @@ const NotificationsEmail: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
diff --git a/src/components/Settings/Notifications/NotificationsGotify/index.tsx b/src/components/Settings/Notifications/NotificationsGotify/index.tsx
index f8f7d286..dd03210c 100644
--- a/src/components/Settings/Notifications/NotificationsGotify/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsGotify/index.tsx
@@ -160,7 +160,7 @@ const NotificationsGotify: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -169,7 +169,7 @@ const NotificationsGotify: React.FC = () => {
                 {intl.formatMessage(messages.url)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="url" name="url" type="text" />
                 </div>
@@ -183,7 +183,7 @@ const NotificationsGotify: React.FC = () => {
                 {intl.formatMessage(messages.token)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="token" name="token" type="text" />
                 </div>
diff --git a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
index 0aa1851d..de112798 100644
--- a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
@@ -145,7 +145,7 @@ const NotificationsLunaSea: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -170,7 +170,7 @@ const NotificationsLunaSea: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="webhookUrl"
@@ -195,7 +195,7 @@ const NotificationsLunaSea: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="profileName" name="profileName" type="text" />
                 </div>
diff --git a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
index 084a00ed..1aa631c9 100644
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
@@ -144,7 +144,7 @@ const NotificationsPushbullet: React.FC = () => {
                 {intl.formatMessage(messages.agentEnabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -171,7 +171,7 @@ const NotificationsPushbullet: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
@@ -189,7 +189,7 @@ const NotificationsPushbullet: React.FC = () => {
               <label htmlFor="channelTag" className="text-label">
                 {intl.formatMessage(messages.channelTag)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="channelTag" name="channelTag" type="text" />
                 </div>
diff --git a/src/components/Settings/Notifications/NotificationsPushover/index.tsx b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
index 2ceba381..44229f57 100644
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -162,7 +162,7 @@ const NotificationsPushover: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -188,7 +188,7 @@ const NotificationsPushover: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="accessToken" name="accessToken" type="text" />
                 </div>
@@ -218,7 +218,7 @@ const NotificationsPushover: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="userToken" name="userToken" type="text" />
                 </div>
diff --git a/src/components/Settings/Notifications/NotificationsSlack/index.tsx b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
index c117c6e8..8551fdd1 100644
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -140,7 +140,7 @@ const NotificationsSlack: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -165,7 +165,7 @@ const NotificationsSlack: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="webhookUrl"
diff --git a/src/components/Settings/Notifications/NotificationsTelegram.tsx b/src/components/Settings/Notifications/NotificationsTelegram.tsx
index 8f2ca9c4..f09b2bc9 100644
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -169,7 +169,7 @@ const NotificationsTelegram: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -209,7 +209,7 @@ const NotificationsTelegram: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
@@ -230,7 +230,7 @@ const NotificationsTelegram: React.FC = () => {
                   {intl.formatMessage(messages.botUsernameTip)}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="botUsername" name="botUsername" type="text" />
                 </div>
@@ -262,7 +262,7 @@ const NotificationsTelegram: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="chatId" name="chatId" type="text" />
                 </div>
@@ -278,7 +278,7 @@ const NotificationsTelegram: React.FC = () => {
                   {intl.formatMessage(messages.sendSilentlyTip)}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="sendSilently" name="sendSilently" />
               </div>
             </div>
diff --git a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
index 92d78980..8d4a6c0b 100644
--- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
@@ -120,7 +120,7 @@ const NotificationsWebPush: React.FC = () => {
                   {intl.formatMessage(messages.agentenabled)}
                   <span className="label-required">*</span>
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <Field type="checkbox" id="enabled" name="enabled" />
                 </div>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
index 3731923d..d47bd1b2 100644
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
@@ -226,7 +226,7 @@ const NotificationsWebhook: React.FC = () => {
                 {intl.formatMessage(messages.agentenabled)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
@@ -235,7 +235,7 @@ const NotificationsWebhook: React.FC = () => {
                 {intl.formatMessage(messages.webhookUrl)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="webhookUrl"
@@ -253,7 +253,7 @@ const NotificationsWebhook: React.FC = () => {
               <label htmlFor="authHeader" className="text-label">
                 {intl.formatMessage(messages.authheader)}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="authHeader" name="authHeader" type="text" />
                 </div>
@@ -264,7 +264,7 @@ const NotificationsWebhook: React.FC = () => {
                 {intl.formatMessage(messages.customJson)}
                 <span className="label-required">*</span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <JSONEditor
                     name="webhook-json-payload"
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index ef18dfc8..fa1d8dec 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -354,7 +354,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         : messages.defaultserver
                     )}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field type="checkbox" id="isDefault" name="isDefault" />
                   </div>
                 </div>
@@ -362,7 +362,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="is4k" className="checkbox-label">
                     {intl.formatMessage(messages.server4k)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field type="checkbox" id="is4k" name="is4k" />
                   </div>
                 </div>
@@ -371,7 +371,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.servername)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="name"
@@ -393,7 +393,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.hostname)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <span className="protocol">
                         {values.ssl ? 'https://' : 'http://'}
@@ -420,7 +420,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.port)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       id="port"
                       name="port"
@@ -441,7 +441,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="ssl" className="checkbox-label">
                     {intl.formatMessage(messages.ssl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="ssl"
@@ -458,7 +458,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.apiKey)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <SensitiveInput
                         as="field"
@@ -480,7 +480,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="baseUrl" className="text-label">
                     {intl.formatMessage(messages.baseUrl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="baseUrl"
@@ -503,7 +503,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.qualityprofile)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -541,7 +541,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.rootfolder)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -577,7 +577,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.minimumAvailability)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -607,7 +607,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="tags" className="text-label">
                     {intl.formatMessage(messages.tags)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Select<OptionType, true>
                       options={
                         isValidated
@@ -664,7 +664,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="externalUrl" className="text-label">
                     {intl.formatMessage(messages.externalUrl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="externalUrl"
@@ -682,7 +682,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="syncEnabled" className="checkbox-label">
                     {intl.formatMessage(messages.syncEnabled)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="syncEnabled"
@@ -694,7 +694,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   <label htmlFor="enableSearch" className="checkbox-label">
                     {intl.formatMessage(messages.enableSearch)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="enableSearch"
diff --git a/src/components/Settings/SettingsJobsCache/index.tsx b/src/components/Settings/SettingsJobsCache/index.tsx
index 90731b5b..015747af 100644
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -216,7 +216,7 @@ const SettingsJobs: React.FC = () => {
                 <label htmlFor="jobSchedule" className="text-label">
                   {intl.formatMessage(messages.editJobSchedulePrompt)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   {jobEditModal.job?.interval === 'short' ? (
                     <select
                       name="jobScheduleMinutes"
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 9879b56f..8c9d06f6 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -191,7 +191,7 @@ const SettingsMain: React.FC = () => {
                     <label htmlFor="apiKey" className="text-label">
                       {intl.formatMessage(messages.apikey)}
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <SensitiveInput
                           type="text"
@@ -221,7 +221,7 @@ const SettingsMain: React.FC = () => {
                   <label htmlFor="applicationTitle" className="text-label">
                     {intl.formatMessage(messages.applicationTitle)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="applicationTitle"
@@ -238,7 +238,7 @@ const SettingsMain: React.FC = () => {
                   <label htmlFor="applicationUrl" className="text-label">
                     {intl.formatMessage(messages.applicationurl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="applicationUrl"
@@ -259,7 +259,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(messages.trustProxyTip)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="trustProxy"
@@ -282,7 +282,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(messages.csrfProtectionTip)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="csrfProtection"
@@ -300,7 +300,7 @@ const SettingsMain: React.FC = () => {
                   <label htmlFor="locale" className="text-label">
                     {intl.formatMessage(messages.locale)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field as="select" id="locale" name="locale">
                         {(
@@ -327,7 +327,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(messages.regionTip)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <RegionSelector
                         value={values.region ?? ''}
@@ -344,7 +344,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(messages.originallanguageTip)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <LanguageSelector
                         setFieldValue={setFieldValue}
@@ -362,7 +362,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(globalMessages.experimental)}
                     </Badge>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="hideAvailable"
@@ -382,7 +382,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(messages.partialRequestsEnabled)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="partialRequestsEnabled"
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index 5760a959..d5aa7749 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -430,7 +430,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                 <label htmlFor="preset" className="text-label">
                   {intl.formatMessage(messages.serverpreset)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <select
                       id="preset"
@@ -504,7 +504,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   {intl.formatMessage(messages.hostname)}
                   <span className="label-required">*</span>
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
                       {values.useSsl ? 'https://' : 'http://'}
@@ -527,7 +527,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   {intl.formatMessage(messages.port)}
                   <span className="label-required">*</span>
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <Field
                     type="text"
                     inputMode="numeric"
@@ -544,7 +544,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                 <label htmlFor="ssl" className="checkbox-label">
                   {intl.formatMessage(messages.enablessl)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <Field
                     type="checkbox"
                     id="useSsl"
@@ -577,7 +577,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     {intl.formatMessage(messages.webAppUrlTip)}
                   </span>
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <Field
                       type="text"
@@ -790,7 +790,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       {intl.formatMessage(messages.hostname)}
                       <span className="label-required">*</span>
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
                           {values.tautulliUseSsl ? 'https://' : 'http://'}
@@ -813,7 +813,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       {intl.formatMessage(messages.port)}
                       <span className="label-required">*</span>
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <Field
                         type="text"
                         inputMode="numeric"
@@ -830,7 +830,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     <label htmlFor="tautulliUseSsl" className="checkbox-label">
                       {intl.formatMessage(messages.enablessl)}
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <Field
                         type="checkbox"
                         id="tautulliUseSsl"
@@ -848,7 +848,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     <label htmlFor="tautulliUrlBase" className="text-label">
                       {intl.formatMessage(messages.urlBase)}
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <Field
                           type="text"
@@ -867,7 +867,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       {intl.formatMessage(messages.tautulliApiKey)}
                       <span className="label-required">*</span>
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <SensitiveInput
                           as="field"
@@ -885,7 +885,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                     <label htmlFor="tautulliExternalUrl" className="text-label">
                       {intl.formatMessage(messages.externalUrl)}
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <Field
                           type="text"
diff --git a/src/components/Settings/SettingsUsers/index.tsx b/src/components/Settings/SettingsUsers/index.tsx
index 02a7c40d..8e1d9350 100644
--- a/src/components/Settings/SettingsUsers/index.tsx
+++ b/src/components/Settings/SettingsUsers/index.tsx
@@ -112,7 +112,7 @@ const SettingsUsers: React.FC = () => {
                       {intl.formatMessage(messages.localLoginTip)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="localLogin"
@@ -130,7 +130,7 @@ const SettingsUsers: React.FC = () => {
                       {intl.formatMessage(messages.newPlexLoginTip)}
                     </span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="newPlexLogin"
@@ -145,7 +145,7 @@ const SettingsUsers: React.FC = () => {
                   <label htmlFor="applicationTitle" className="text-label">
                     {intl.formatMessage(messages.movieRequestLimitLabel)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <QuotaSelector
                       onChange={setFieldValue}
                       dayFieldName="movieQuotaDays"
@@ -160,7 +160,7 @@ const SettingsUsers: React.FC = () => {
                   <label htmlFor="applicationTitle" className="text-label">
                     {intl.formatMessage(messages.tvRequestLimitLabel)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <QuotaSelector
                       onChange={setFieldValue}
                       dayFieldName="tvQuotaDays"
@@ -183,7 +183,7 @@ const SettingsUsers: React.FC = () => {
                         {intl.formatMessage(messages.defaultPermissionsTip)}
                       </span>
                     </span>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="max-w-lg">
                         <PermissionEdit
                           currentPermission={values.defaultPermissions}
diff --git a/src/components/Settings/SonarrModal/index.tsx b/src/components/Settings/SonarrModal/index.tsx
index f3c2049d..391db286 100644
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/src/components/Settings/SonarrModal/index.tsx
@@ -382,7 +382,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                         : messages.defaultserver
                     )}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field type="checkbox" id="isDefault" name="isDefault" />
                   </div>
                 </div>
@@ -390,7 +390,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="is4k" className="checkbox-label">
                     {intl.formatMessage(messages.server4k)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field type="checkbox" id="is4k" name="is4k" />
                   </div>
                 </div>
@@ -399,7 +399,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.servername)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="name"
@@ -421,7 +421,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.hostname)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <span className="protocol">
                         {values.ssl ? 'https://' : 'http://'}
@@ -448,7 +448,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.port)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       id="port"
                       name="port"
@@ -469,7 +469,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="ssl" className="checkbox-label">
                     {intl.formatMessage(messages.ssl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="ssl"
@@ -486,7 +486,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.apiKey)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <SensitiveInput
                         as="field"
@@ -508,7 +508,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="baseUrl" className="text-label">
                     {intl.formatMessage(messages.baseUrl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="baseUrl"
@@ -531,7 +531,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.qualityprofile)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -569,7 +569,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.rootfolder)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -608,7 +608,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     {intl.formatMessage(messages.languageprofile)}
                     <span className="label-required">*</span>
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -652,7 +652,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="tags" className="text-label">
                     {intl.formatMessage(messages.tags)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Select<OptionType, true>
                       options={
                         isValidated
@@ -712,7 +712,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="activeAnimeProfileId" className="text-label">
                     {intl.formatMessage(messages.animequalityprofile)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -752,7 +752,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="activeAnimeRootFolder" className="text-label">
                     {intl.formatMessage(messages.animerootfolder)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -791,7 +791,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   >
                     {intl.formatMessage(messages.animelanguageprofile)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         as="select"
@@ -835,7 +835,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="tags" className="text-label">
                     {intl.formatMessage(messages.animeTags)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Select<OptionType, true>
                       options={
                         isValidated
@@ -898,7 +898,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   >
                     {intl.formatMessage(messages.seasonfolders)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="enableSeasonFolders"
@@ -910,7 +910,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="externalUrl" className="text-label">
                     {intl.formatMessage(messages.externalUrl)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <Field
                         id="externalUrl"
@@ -928,7 +928,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="syncEnabled" className="checkbox-label">
                     {intl.formatMessage(messages.syncEnabled)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="syncEnabled"
@@ -940,7 +940,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   <label htmlFor="enableSearch" className="checkbox-label">
                     {intl.formatMessage(messages.enableSearch)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <Field
                       type="checkbox"
                       id="enableSearch"
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 1682a7f3..d6243aa2 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -349,7 +349,7 @@ const UserList: React.FC = () => {
                     <label htmlFor="displayName" className="text-label">
                       {intl.formatMessage(messages.displayName)}
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <Field
                           id="displayName"
@@ -364,7 +364,7 @@ const UserList: React.FC = () => {
                       {intl.formatMessage(messages.email)}
                       <span className="label-required">*</span>
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <Field
                           id="email"
@@ -389,7 +389,7 @@ const UserList: React.FC = () => {
                         {intl.formatMessage(messages.autogeneratepasswordTip)}
                       </span>
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <Field
                         type="checkbox"
                         id="genpassword"
@@ -410,7 +410,7 @@ const UserList: React.FC = () => {
                         <span className="label-required">*</span>
                       )}
                     </label>
-                    <div className="form-input">
+                    <div className="form-input-area">
                       <div className="form-input-field">
                         <SensitiveInput
                           as="field"
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index 5cce3f7e..5f563ee9 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -212,7 +212,7 @@ const UserGeneralSettings: React.FC = () => {
                 <label htmlFor="displayName" className="text-label">
                   {intl.formatMessage(messages.displayName)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <Field
                       id="displayName"
@@ -249,7 +249,7 @@ const UserGeneralSettings: React.FC = () => {
                     </span>
                   )}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <Field id="discordId" name="discordId" type="text" />
                   </div>
@@ -262,7 +262,7 @@ const UserGeneralSettings: React.FC = () => {
                 <label htmlFor="locale" className="text-label">
                   {intl.formatMessage(messages.applanguage)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <Field as="select" id="locale" name="locale">
                       <option value="" lang={locale}>
@@ -295,7 +295,7 @@ const UserGeneralSettings: React.FC = () => {
                     {intl.formatMessage(messages.regionTip)}
                   </span>
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <RegionSelector
                       name="region"
@@ -313,7 +313,7 @@ const UserGeneralSettings: React.FC = () => {
                     {intl.formatMessage(messages.originallanguageTip)}
                   </span>
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <LanguageSelector
                       setFieldValue={setFieldValue}
@@ -333,7 +333,7 @@ const UserGeneralSettings: React.FC = () => {
                           {intl.formatMessage(messages.movierequestlimit)}
                         </span>
                       </label>
-                      <div className="form-input">
+                      <div className="form-input-area">
                         <div className="flex flex-col">
                           <div className="mb-4 flex items-center">
                             <input
@@ -373,7 +373,7 @@ const UserGeneralSettings: React.FC = () => {
                           {intl.formatMessage(messages.seriesrequestlimit)}
                         </span>
                       </label>
-                      <div className="form-input">
+                      <div className="form-input-area">
                         <div className="flex flex-col">
                           <div className="mb-4 flex items-center">
                             <input
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
index 5e22d66e..b88f69e6 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
@@ -126,7 +126,7 @@ const UserNotificationsDiscord: React.FC = () => {
                   </span>
                 )}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field id="discordId" name="discordId" type="text" />
                 </div>
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
index 54469845..b61507b3 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
@@ -115,7 +115,7 @@ const UserEmailSettings: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
index 19dca65c..0cefb015 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
@@ -123,7 +123,7 @@ const UserPushbulletSettings: React.FC = () => {
                   </span>
                 )}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <SensitiveInput
                     as="field"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
index cc3fbabe..ecdc96e7 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
@@ -146,7 +146,7 @@ const UserPushoverSettings: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="pushoverApplicationToken"
@@ -182,7 +182,7 @@ const UserPushoverSettings: React.FC = () => {
                   })}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="pushoverUserKey"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
index c6433f48..a5303b0e 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
@@ -141,7 +141,7 @@ const UserTelegramSettings: React.FC = () => {
                   </span>
                 )}
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <div className="form-input-field">
                   <Field
                     id="telegramChatId"
@@ -161,7 +161,7 @@ const UserTelegramSettings: React.FC = () => {
                   {intl.formatMessage(messages.sendSilentlyDescription)}
                 </span>
               </label>
-              <div className="form-input">
+              <div className="form-input-area">
                 <Field
                   type="checkbox"
                   id="telegramSendSilently"
diff --git a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
index c7802358..6288f064 100644
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -166,7 +166,7 @@ const UserPasswordChange: React.FC = () => {
                   <label htmlFor="currentPassword" className="text-label">
                     {intl.formatMessage(messages.currentpassword)}
                   </label>
-                  <div className="form-input">
+                  <div className="form-input-area">
                     <div className="form-input-field">
                       <SensitiveInput
                         as="field"
@@ -186,7 +186,7 @@ const UserPasswordChange: React.FC = () => {
                 <label htmlFor="newPassword" className="text-label">
                   {intl.formatMessage(messages.newpassword)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <SensitiveInput
                       as="field"
@@ -205,7 +205,7 @@ const UserPasswordChange: React.FC = () => {
                 <label htmlFor="confirmPassword" className="text-label">
                   {intl.formatMessage(messages.confirmpassword)}
                 </label>
-                <div className="form-input">
+                <div className="form-input-area">
                   <div className="form-input-field">
                     <SensitiveInput
                       as="field"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2d207872..203b6a1c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -227,7 +227,7 @@
     @apply mt-6 max-w-6xl sm:mt-5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4;
   }
 
-  .form-input {
+  .form-input-area {
     @apply text-sm text-white sm:col-span-2;
   }