Merge branch 'redesign-input-restyle' into 'develop'

Restyle input and textarea See merge request baserow/baserow!1763
2025-04-17 18:32:35 +00:00 · 2023-11-15 05:25:06 +00:00 · 2023-11-15 05:25:06 +00:00 · 1d16be7b98
commit 1d16be7b98
parent f12615ea04 0548a90a2f
46 changed files with 190 additions and 118 deletions
--- a/changelog/entries/unreleased/feature/1918_restyle_input_and_textarea.json
+++ b/changelog/entries/unreleased/feature/1918_restyle_input_and_textarea.json
@ -0,0 +1,7 @@
+{
+    "type": "feature",
+    "message": "Restyle input and textarea",
+    "issue_number": 1918,
+    "bullet_points": [],
+    "created_at": "2023-10-13"
+}
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/rbac/SelectMembersList.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/rbac/SelectMembersList.vue
@ -4,7 +4,7 @@
      <input
        v-model="activeSearchTerm"
        type="text"
-        class="input input--large"
+        class="input"
        :placeholder="$t('selectMembersList.searchPlaceholder')"
        @keyup="search(activeSearchTerm)"
      />
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/rbac/SelectTeamsList.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/rbac/SelectTeamsList.vue
@ -4,7 +4,7 @@
      <input
        v-model="activeSearchTerm"
        type="text"
-        class="input input--large"
+        class="input"
        :placeholder="$t('selectTeamsList.searchPlaceholder')"
        @keyup="search(activeSearchTerm)"
      />
--- a/enterprise/web-frontend/modules/baserow_enterprise/pages/login/loginWithSAML.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/pages/login/loginWithSAML.vue
@ -25,7 +25,7 @@
              }"
              type="email"
              :placeholder="$t('login.emailPlaceholder')"
-              class="input input--large"
+              class="input"
              @input="loginRequestError = null"
              @blur="$v.values.email.$touch()"
            />
--- a/premium/web-frontend/modules/baserow_premium/components/admin/users/forms/ChangePasswordForm.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/admin/users/forms/ChangePasswordForm.vue
@ -20,7 +20,7 @@
          v-model="values.passwordConfirm"
          :class="{ 'input--error': fieldHasErrors('passwordConfirm') }"
          type="password"
-          class="input input--large"
+          class="input"
          @blur="$v.values.passwordConfirm.$touch()"
        />
        <div v-if="fieldHasErrors('passwordConfirm')" class="error">
--- a/premium/web-frontend/modules/baserow_premium/components/admin/users/forms/UserForm.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/admin/users/forms/UserForm.vue
@ -8,7 +8,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          :disabled="loading"
          @blur="$v.values.name.$touch()"
        />
@ -25,7 +25,7 @@
          v-model="values.username"
          :class="{ 'input--error': fieldHasErrors('username') }"
          type="text"
-          class="input input--large"
+          class="input"
          :disabled="loading"
          @blur="$v.values.username.$touch()"
        />
--- a/premium/web-frontend/modules/baserow_premium/components/license/RegisterLicenseForm.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/license/RegisterLicenseForm.vue
@ -10,7 +10,7 @@
          v-model="values.license"
          :class="{ 'input--error': fieldHasErrors('license') }"
          type="text"
-          class="input input--large textarea--modal"
+          class="input textarea--modal"
          @blur="$v.values.license.$touch()"
        />
        <div v-if="fieldHasErrors('license')" class="error">
--- a/web-frontend/modules/core/assets/scss/components/filters.scss
+++ b/web-frontend/modules/core/assets/scss/components/filters.scss
@ -134,7 +134,7 @@
 .filters__value-input {
  padding-top: 0;
  padding-bottom: 0;
-  line-height: 30px;
+  line-height: 36px;
 }

 .filters__combined_value-input {
@ -156,9 +156,10 @@
 }

 .filters__value-rating {
-  border: solid 1px $color-neutral-400;
+  border: solid 1px $palette-neutral-400;
  padding: 6px 12px;
  @include rounded($rounded);
+  @include add-elevation($elevation-low);
 }

 .filters__value-link-row {
@ -167,13 +168,14 @@
  display: block;
  position: relative;
  color: $color-neutral-900;
-  line-height: 30px;
-  height: 30px;
-  border: solid 1px $color-neutral-400;
+  line-height: 36px;
+  height: 36px;
+  border: 1px solid $palette-neutral-400;
  padding: 0 10px;
  background-color: $white;
  width: 100%;
  @include rounded($rounded);
+  @include add-elevation($elevation-low);

  &:hover {
    text-decoration: none;
--- a/web-frontend/modules/core/assets/scss/components/form.scss
+++ b/web-frontend/modules/core/assets/scss/components/form.scss
@ -24,8 +24,8 @@
 .control__label {
  display: block;
  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 8px;
+  font-weight: 500;
+  margin-bottom: 12px;
  @include flex-align-items(3px);

  & + :not(.control__description) {
@ -34,7 +34,6 @@

  &.control__label--small {
    font-size: 13px;
-    font-weight: 600;

    & + :not(.control__description) {
      margin-top: 4px;
@ -97,38 +96,42 @@
  appearance: none;
  display: block;
  width: 100%;
-  border: 1px solid $color-neutral-400;
-  padding: 8px 12px;
+  border: 1px solid $palette-neutral-400;
+  padding: 12px 16px;
  outline: none;
  line-height: 100%;
+  height: 44px;
+  box-sizing: border-box;
+  @include add-elevation($elevation-low);
+
+  &::placeholder {
+    color: $palette-neutral-700;
+  }

  @include rounded($rounded-md);

  &:active,
  &:focus {
-    border-color: $color-primary-500;
-  }
-
-  &.input--large {
-    padding: 12px 12px;
+    border-color: $palette-blue-500;
  }

  &.input--error {
-    border-color: $color-error-500;
+    border-color: $palette-red-600;
  }

  &.input--monospace {
    font-family: monospace;
  }

-  &[disabled] {
-    color: $color-neutral-900;
-    background-color: $color-neutral-50;
+  &.input--small {
+    height: 36px;
+    padding: 8px 12px;
+  }

-    &:active,
-    &:focus {
-      border-color: $color-neutral-400;
-    }
+  &[disabled] {
+    color: $palette-neutral-700;
+    box-shadow: none;
+    background-color: $palette-neutral-100;
  }
 }

@ -159,10 +162,6 @@
    .input {
      padding-left: 32px;
      padding-right: 8px;
-
-      &.input--large {
-        padding-right: 12px;
-      }
    }

    i {
@ -440,14 +439,16 @@
 }

 .error {
-  margin-top: 6px;
-  color: $color-error-500;
+  margin-top: 14px;
+  color: $palette-red-800;
+  font-size: 12px;
  @include flex-align-items(4px);
 }

 .warning {
-  margin-top: 6px;
+  margin-top: 14px;
  color: $color-warning-600;
+  font-size: 12px;
 }

 .actions {
--- a/web-frontend/modules/core/assets/scss/components/form_input.scss
+++ b/web-frontend/modules/core/assets/scss/components/form_input.scss
@ -1,17 +1,24 @@
 .form-input {
  display: flex;
  flex: 1;
-  border: 1px solid $color-neutral-400;
+  border: 1px solid $palette-neutral-400;
  position: relative;
+  height: 44px;
+  box-sizing: border-box;
+  @include add-elevation($elevation-low);

  @include rounded($rounded-md);

+  &.form-input--small {
+    height: 36px;
+  }
+
  &.form-input--focus {
-    border-color: $color-primary-500;
+    border-color: $palette-blue-500;
  }

  &.form-input--error {
-    border-color: $color-error-500;
+    border-color: $palette-red-600;
  }

  &.form-input--monospace {
@ -20,13 +27,8 @@

  &.form-input--disabled {
    cursor: not-allowed;
-    color: $color-neutral-900;
-    background-color: $color-neutral-50;
-
-    &:active,
-    &:focus {
-      border-color: $color-neutral-400;
-    }
+    color: $palette-neutral-700;
+    box-shadow: none;
  }

  &.form-input--loading {
@ -35,11 +37,11 @@
      margin-top: -7px;

      @include loading(14px);
-      @include absolute(50%, 10px, auto, auto);
+      @include absolute(50%, 16px, auto, auto);
    }

    &.form-input--with-icon-left::after {
-      left: 10px;
+      left: 16px;
      right: auto;
    }
  }
@ -52,24 +54,29 @@
  outline: none;
  line-height: 100%;
  background: none;
-  padding: 8px 12px;
+  padding: 12px 16px;
  background-color: $white;

+  &::placeholder {
+    color: $palette-neutral-700;
+  }
+
  @include rounded($rounded-md);

-  .form-input--large & {
-    padding: 12px 12px;
-  }
-
  .form-input--disabled & {
    cursor: not-allowed;
+    background-color: $palette-neutral-100;
+  }
+
+  .form-input--small & {
+    padding: 8px 12px;
  }

  .form-input--with-icon-left & {
-    padding-left: 32px;
+    padding-left: 38px;
    padding-right: 8px;

-    .form-input--large & {
+    .form- & {
      padding-right: 12px;
    }
  }
@ -80,10 +87,10 @@
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
-  color: $color-neutral-300;
+  color: $palette-neutral-600;
  font-size: 16px;

-  .form-input--large & {
+  .form- & {
    font-size: 16px;
    line-height: 16px;
  }
@ -96,6 +103,18 @@
  .form-input--loading & {
    display: none;
  }
+
+  .form-input--error & {
+    color: $palette-red-600;
+  }
+
+  .form-input--focus & {
+    color: $palette-blue-500;
+  }
+
+  .form-input--disabled & {
+    color: $palette-neutral-600;
+  }
 }

 .form-input__suffix {
--- a/web-frontend/modules/core/components/FormInput.vue
+++ b/web-frontend/modules/core/components/FormInput.vue
@ -23,11 +23,11 @@
            'form-input--with-icon-left': iconLeft,
            'form-input--with-icon-right': iconRight,
            'form-input--error': hasError,
-            'form-input--large': large,
            'form-input--monospace': monospace,
            'form-input--loading': loading,
            'form-input--disabled': disabled,
            'form-input--focus': focus,
+            'form-input--small': small,
          }"
        >
          <input
@ -142,6 +142,11 @@ export default {
      required: false,
      default: null,
    },
+    small: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
  },
  data() {
    return {
--- a/web-frontend/modules/core/components/application/ApplicationForm.vue
+++ b/web-frontend/modules/core/components/application/ApplicationForm.vue
@ -11,7 +11,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @focus.once="$event.target.select()"
          @blur="$v.values.name.$touch()"
        />
--- a/web-frontend/modules/core/components/auth/PasswordLogin.vue
+++ b/web-frontend/modules/core/components/auth/PasswordLogin.vue
@ -27,7 +27,7 @@
            v-if="invitation !== null"
            ref="email"
            type="email"
-            class="input input--large"
+            class="input"
            disabled
            :value="values.email"
          />
@ -39,7 +39,7 @@
            type="email"
            autocomplete="username"
            :placeholder="$t('login.emailPlaceholder')"
-            class="input input--large"
+            class="input"
            @blur="$v.values.email.$touch()"
          />
          <div class="auth__control-error">
@ -61,7 +61,7 @@
            }"
            type="password"
            autocomplete="current-password"
-            class="input input--large"
+            class="input"
            :placeholder="$t('login.passwordPlaceholder')"
            @blur="$v.values.password.$touch()"
          />
--- a/web-frontend/modules/core/components/auth/PasswordRegister.vue
+++ b/web-frontend/modules/core/components/auth/PasswordRegister.vue
@ -27,7 +27,7 @@
            v-if="invitation !== null"
            ref="email"
            type="email"
-            class="input input--large"
+            class="input"
            disabled
            :value="account.email"
          />
@ -38,7 +38,7 @@
            :class="{ 'input--error': $v.account.email.$error }"
            type="text"
            autocomplete="username"
-            class="input input--large"
+            class="input"
            :placeholder="$t('signup.emailPlaceholder')"
            @blur="$v.account.email.$touch()"
          />
@ -57,7 +57,7 @@
            v-model="account.name"
            :class="{ 'input--error': $v.account.name.$error }"
            type="text"
-            class="input input--large"
+            class="input"
            :placeholder="$t('signup.namePlaceholder')"
            @blur="$v.account.name.$touch()"
          />
@ -90,7 +90,7 @@
            v-model="account.passwordConfirm"
            :class="{ 'input--error': $v.account.passwordConfirm.$error }"
            type="password"
-            class="input input--large"
+            class="input"
            :placeholder="$t('signup.passwordRepeatPlaceholder')"
            @blur="$v.account.passwordConfirm.$touch()"
          />
--- a/web-frontend/modules/core/components/crudTable/CrudTableSearch.vue
+++ b/web-frontend/modules/core/components/crudTable/CrudTableSearch.vue
@ -9,7 +9,7 @@
        v-model="headerSearchTerm"
        type="text"
        :placeholder="$t('crudTableSearch.search')"
-        class="input input--large"
+        class="input"
        @keyup="searchIfChanged(headerSearchTerm, false)"
      />
      <i class="iconoir-search"></i>
--- a/web-frontend/modules/core/components/files/UploadViaURLUserFileUpload.vue
+++ b/web-frontend/modules/core/components/files/UploadViaURLUserFileUpload.vue
@ -12,7 +12,7 @@
            v-model="values.url"
            :class="{ 'input--error': $v.values.url.$error }"
            type="text"
-            class="input input--large"
+            class="input"
            @blur="$v.values.url.$touch()"
          />
          <div v-if="$v.values.url.$error" class="error">
--- a/web-frontend/modules/core/components/health/EmailTester.vue
+++ b/web-frontend/modules/core/components/health/EmailTester.vue
@ -32,7 +32,7 @@
            v-model="values.targetEmail"
            :class="{ 'input--error': fieldHasErrors('targetEmail') }"
            type="text"
-            class="input input--large"
+            class="input"
            :disabled="loading"
            @blur="$v.values.targetEmail.$touch()"
          />
--- a/web-frontend/modules/core/components/helpers/PasswordInput.vue
+++ b/web-frontend/modules/core/components/helpers/PasswordInput.vue
@ -31,7 +31,7 @@ modules/core/validators.js
    <input
      :class="{ 'input--error': validationState.$error }"
      type="password"
-      class="input input--large"
+      class="input"
      :autocomplete="autocomplete"
      :value="value"
      :placeholder="placeholder"
--- a/web-frontend/modules/core/components/settings/AccountForm.vue
+++ b/web-frontend/modules/core/components/settings/AccountForm.vue
@ -10,7 +10,7 @@
          v-model="values.first_name"
          :class="{ 'input--error': fieldHasErrors('first_name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @blur="$v.values.first_name.$touch()"
        />
        <div v-if="!$v.values.first_name.required" class="error">
--- a/web-frontend/modules/core/components/settings/PasswordSettings.vue
+++ b/web-frontend/modules/core/components/settings/PasswordSettings.vue
@ -20,7 +20,7 @@
            v-model="account.oldPassword"
            :class="{ 'input--error': $v.account.oldPassword.$error }"
            type="password"
-            class="input input--large"
+            class="input"
            @blur="$v.account.oldPassword.$touch()"
          />
          <div v-if="$v.account.oldPassword.$error" class="error">
@ -48,7 +48,7 @@
            v-model="account.passwordConfirm"
            :class="{ 'input--error': $v.account.passwordConfirm.$error }"
            type="password"
-            class="input input--large"
+            class="input"
            @blur="$v.account.passwordConfirm.$touch()"
          />
          <div v-if="$v.account.passwordConfirm.$error" class="error">
--- a/web-frontend/modules/core/components/workspace/MemberSelectionList.vue
+++ b/web-frontend/modules/core/components/workspace/MemberSelectionList.vue
@ -5,7 +5,7 @@
        ref="searchInput"
        v-model="activeSearchTerm"
        type="text"
-        class="input input--large"
+        class="input"
        :placeholder="$t('memberSelectionList.searchPlaceholder')"
      />
      <div class="margin-top-2">
--- a/web-frontend/modules/core/components/workspace/WorkspaceForm.vue
+++ b/web-frontend/modules/core/components/workspace/WorkspaceForm.vue
@ -11,7 +11,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @focus.once="$event.target.select()"
          @blur="$v.values.name.$touch()"
        />
--- a/web-frontend/modules/core/pages/forgotPassword.vue
+++ b/web-frontend/modules/core/pages/forgotPassword.vue
@ -43,7 +43,7 @@
                v-model="account.email"
                :class="{ 'input--error': $v.account.email.$error }"
                type="text"
-                class="input input--large"
+                class="input"
                :disabled="success"
                @blur="$v.account.email.$touch()"
              />
--- a/web-frontend/modules/core/pages/resetPassword.vue
+++ b/web-frontend/modules/core/pages/resetPassword.vue
@ -52,7 +52,7 @@
                v-model="account.passwordConfirm"
                :class="{ 'input--error': $v.account.passwordConfirm.$error }"
                type="password"
-                class="input input--large"
+                class="input"
                @blur="$v.account.passwordConfirm.$touch()"
              />
              <div class="auth__control-error">
--- a/web-frontend/modules/core/pages/styleGuide.vue
+++ b/web-frontend/modules/core/pages/styleGuide.vue
@ -26,6 +26,25 @@
          </p>
        </div>
        <div class="margin-bottom-3">
+          <div class="control">
+            <div class="control__elements">
+              <textarea
+                ref="input"
+                type="text"
+                class="input field-long-text"
+                placeholder="Enter something here"
+              />
+            </div>
+          </div>
+
+          <FormInput
+            v-model="input"
+            disabled
+            placeholder="Enter something here"
+            label="Small text field"
+            value="This is the value"
+            icon-right="iconoir-clock"
+          />
          <FormInput
            v-model="input"
            label="Small text field"
@ -57,7 +76,7 @@
            v-model="input"
            label="Icon text field"
            placeholder="Enter something here"
-            icon-right="clock"
+            icon-right="iconoi-clock"
          />
          <FormInput
            v-model="input"
@ -90,27 +109,30 @@
            v-model="input"
            label="Large text field"
            placeholder="Enter something here"
-            large
          />
          <FormInput
            v-model="input"
            label="Large password field"
            placeholder="Enter something here"
            type="password"
-            large
          />
          <FormInput
            v-model="input"
            label="Large icon field"
            placeholder="Enter something here"
-            large
            icon-right="iconoir-clock"
          />
          <FormInput
            v-model="input"
            label="Large icon field left"
            placeholder="Enter something here"
-            large
+            icon-left="iconoir-search"
+          />
+          <FormInput
+            v-model="input"
+            small
+            label="Reduced height field"
+            placeholder="Enter something here"
            icon-left="iconoir-search"
          />
          <FormInput
@ -118,17 +140,33 @@
            horizontal
            label="Horizontal Large icon field left"
            placeholder="Enter something here"
-            large
-            icon-left="iconoir-search"
-          />
-          <FormInput
-            v-model="input"
-            horizontal-variable
-            label="Horizontal Large icon field left"
-            placeholder="Enter something here"
-            large
            icon-left="iconoir-search"
          />
+
+          <div class="control">
+            <label class="control__label">Native input</label>
+            <div class="control__elements">
+              <input
+                ref="name"
+                type="text"
+                class="input"
+                placeholder="Native input"
+              />
+            </div>
+          </div>
+
+          <div class="control">
+            <label class="control__label">Native input reduced height</label>
+            <div class="control__elements">
+              <input
+                ref="name"
+                type="text"
+                class="input input--small"
+                placeholder="Native input reduced height"
+              />
+            </div>
+          </div>
+
          <div class="control">
            <label class="control__label">Checkbox field</label>
            <div class="control__elements">
@ -1620,7 +1658,7 @@
                  <input
                    type="text"
                    placeholder="Find member..."
-                    class="input input--large"
+                    class="input"
                  />
                  <i class="iconoir-search"></i>
                </div>
--- a/web-frontend/modules/database/components/airtable/ImportFromAirtable.vue
+++ b/web-frontend/modules/database/components/airtable/ImportFromAirtable.vue
@ -15,7 +15,7 @@
          v-model="airtableUrl"
          :class="{ 'input--error': $v.airtableUrl.$error }"
          type="text"
-          class="input input--large"
+          class="input"
          :placeholder="$t('importFromAirtable.airtableShareLinkPaste')"
          @blur="$v.airtableUrl.$touch()"
        />
--- a/web-frontend/modules/database/components/field/FieldForm.vue
+++ b/web-frontend/modules/database/components/field/FieldForm.vue
@ -7,7 +7,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input"
+          class="input input--small"
          :placeholder="$t('fieldForm.name')"
          @blur="$v.values.name.$touch()"
          @input="isPrefilledWithSuggestedFieldName = false"
--- a/web-frontend/modules/database/components/field/FieldTextSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldTextSubForm.vue
@ -6,7 +6,7 @@
          ref="text_default"
          v-model="values.text_default"
          type="text"
-          class="input"
+          class="input input--small"
          :placeholder="$t('fieldTextSubForm.placeholder')"
        />
      </div>
--- a/web-frontend/modules/database/components/form/BlankDatabaseForm.vue
+++ b/web-frontend/modules/database/components/form/BlankDatabaseForm.vue
@ -11,7 +11,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @focus.once="$event.target.select()"
          @blur="$v.values.name.$touch()"
        />
--- a/web-frontend/modules/database/components/row/RowEditFieldDate.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldDate.vue
@ -6,7 +6,7 @@
          ref="date"
          v-model="date"
          type="text"
-          class="input input--large"
+          class="input"
          :class="{ 'input--error': touched && !valid }"
          :placeholder="getDatePlaceholder(field)"
          :disabled="readOnly"
@ -43,7 +43,7 @@
          ref="time"
          v-model="time"
          type="text"
-          class="input input--large"
+          class="input"
          :class="{ 'input--error': touched && !valid }"
          :placeholder="getTimePlaceholder(field)"
          :disabled="readOnly"
--- a/web-frontend/modules/database/components/row/RowEditFieldEmail.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldEmail.vue
@ -4,7 +4,7 @@
      ref="input"
      v-model="copy"
      type="text"
-      class="input input--large"
+      class="input"
      :class="{ 'input--error': touched && !valid }"
      :disabled="readOnly"
      @keyup.enter="$refs.input.blur()"
--- a/web-frontend/modules/database/components/row/RowEditFieldLongText.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldLongText.vue
@ -4,7 +4,7 @@
      ref="input"
      v-model="copy"
      type="text"
-      class="input input--large field-long-text"
+      class="input field-long-text"
      :class="{ 'input--error': touched && !valid }"
      :disabled="readOnly"
      @focus="select()"
--- a/web-frontend/modules/database/components/row/RowEditFieldNumber.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldNumber.vue
@ -4,7 +4,7 @@
      ref="input"
      v-model="copy"
      type="text"
-      class="input input--large field-number"
+      class="input field-number"
      :class="{
        'input--error': (touched && !valid) || isInvalidNumber,
      }"
--- a/web-frontend/modules/database/components/row/RowEditFieldPhoneNumber.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldPhoneNumber.vue
@ -4,7 +4,7 @@
      ref="input"
      v-model="copy"
      type="tel"
-      class="input input--large"
+      class="input"
      :class="{ 'input--error': touched && !valid }"
      :disabled="readOnly"
      @keyup.enter="$refs.input.blur()"
--- a/web-frontend/modules/database/components/row/RowEditFieldText.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldText.vue
@ -4,7 +4,7 @@
      ref="input"
      v-model="copy"
      type="text"
-      class="input input--large"
+      class="input"
      :class="{ 'input--error': touched && !valid }"
      :disabled="readOnly"
      @keyup.enter="$refs.input.blur()"
--- a/web-frontend/modules/database/components/row/RowEditFieldURL.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldURL.vue
@ -4,7 +4,7 @@
      ref="input"
      v-model="copy"
      type="text"
-      class="input input--large"
+      class="input"
      :class="{ 'input--error': touched && !valid }"
      :disabled="readOnly"
      @keyup.enter="$refs.input.blur()"
--- a/web-frontend/modules/database/components/settings/APITokenForm.vue
+++ b/web-frontend/modules/database/components/settings/APITokenForm.vue
@ -8,7 +8,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @blur="$v.values.name.$touch()"
        />
        <div v-if="fieldHasErrors('name')" class="error">
--- a/web-frontend/modules/database/components/table/TableForm.vue
+++ b/web-frontend/modules/database/components/table/TableForm.vue
@ -15,7 +15,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @focus.once="$event.target.select()"
          @blur="$v.values.name.$touch()"
        />
--- a/web-frontend/modules/database/components/table/TablePasteImporter.vue
+++ b/web-frontend/modules/database/components/table/TablePasteImporter.vue
@ -10,7 +10,7 @@
      <div class="control__elements">
        <textarea
          type="text"
-          class="input input--large textarea--modal"
+          class="input textarea--modal"
          @input="changed($event.target.value)"
        ></textarea>
        <div v-if="$v.content.$error" class="error">
--- a/web-frontend/modules/database/components/view/ViewFilterTypeDate.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeDate.vue
@ -5,7 +5,7 @@
        ref="date"
        v-model="dateString"
        type="text"
-        class="input filters__value-input"
+        class="input filters__value-input input--small"
        :disabled="disabled"
        :class="{ 'input--error': $v.dateString.$error }"
        :placeholder="getDatePlaceholder(field)"
--- a/web-frontend/modules/database/components/view/ViewFilterTypeNumber.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeNumber.vue
@ -3,7 +3,7 @@
    ref="input"
    v-model="copy"
    type="text"
-    class="input filters__value-input"
+    class="input filters__value-input input--small"
    :class="{ 'input--error': $v.copy.$error }"
    :disabled="disabled"
    @input="delayedUpdate($event.target.value)"
--- a/web-frontend/modules/database/components/view/ViewFilterTypeText.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeText.vue
@ -3,7 +3,7 @@
    ref="input"
    v-model="copy"
    type="text"
-    class="input filters__value-input"
+    class="input filters__value-input input--small"
    :class="{ 'input--error': $v.copy.$error }"
    :disabled="disabled"
    @input="delayedUpdate($event.target.value)"
--- a/web-frontend/modules/database/components/view/ViewForm.vue
+++ b/web-frontend/modules/database/components/view/ViewForm.vue
@ -10,7 +10,7 @@
          v-model="values.name"
          :class="{ 'input--error': fieldHasErrors('name') }"
          type="text"
-          class="input input--large"
+          class="input"
          @focus.once="$event.target.select()"
          @blur="$v.values.name.$touch()"
        />
--- a/web-frontend/modules/database/components/webhook/WebhookForm.vue
+++ b/web-frontend/modules/database/components/webhook/WebhookForm.vue
@ -24,7 +24,7 @@
            <div class="control__elements">
              <input
                v-model="values.name"
-                class="input"
+                class="input input--small"
                :class="{ 'input--error': fieldHasErrors('name') }"
                @blur="$v.values.name.$touch()"
              />
@ -71,7 +71,7 @@
              <input
                v-model="values.url"
                :placeholder="$t('webhookForm.inputLabels.url')"
-                class="input"
+                class="input input--small"
                :class="{ 'input--error': fieldHasErrors('url') }"
                @blur="$v.values.url.$touch()"
              />
@ -145,7 +145,7 @@
            <div class="webhook__header-row">
              <input
                v-model="header.name"
-                class="input webhook__header-key"
+                class="input input--small webhook__header-key"
                :class="{
                  'input--error':
                    !lastHeader(index) && $v.headers.$each[index].name.$error,
@ -160,7 +160,7 @@
              />
              <input
                v-model="header.value"
-                class="input webhook__header-value"
+                class="input input--small webhook__header-value"
                :class="{
                  'input--error':
                    !lastHeader(index) && $v.headers.$each[index].value.$error,
--- a/web-frontend/modules/database/pages/publicViewLogin.vue
+++ b/web-frontend/modules/database/pages/publicViewLogin.vue
@ -16,7 +16,7 @@
              v-model="values.password"
              :class="{ 'input--error': fieldHasErrors('password') }"
              type="password"
-              class="input input--large"
+              class="input"
            />
            <div v-if="fieldHasErrors('password')" class="error">
              {{ $t('error.passwordRequired') }}
--- a/web-frontend/test/unit/database/components/view/snapshots/viewFilterForm.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/snapshots/viewFilterForm.spec.js.snap
@ -542,7 +542,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
            class="filters__value"
          >
            <input
-              class="input filters__value-input"
+              class="input filters__value-input input--small"
              type="text"
            />
          </div>