diff --git a/resources/assets/js/components/base/theme/BaseSelect.js b/resources/assets/js/components/base/theme/BaseSelect.js
index d136576c..5eead346 100644
--- a/resources/assets/js/components/base/theme/BaseSelect.js
+++ b/resources/assets/js/components/base/theme/BaseSelect.js
@@ -12,7 +12,7 @@ export default {
   disabledMultiSelectTags: 'bg-gray-200 text-gray-400',
   multiselectTagsWrap: 'multiselect__tags-wrap inline',
   multiselectTag:
-    'multiselect__tag relative inline-block pt-1 pr-6 pb-1 pl-2 rounded mr-2 text-white leading-none mb-1 whitespace-no-wrap overflow-hidden max-w-full',
+    'multiselect__tag relative inline-block pt-1 pr-6 pb-1 pl-2 rounded mr-2 text-white leading-none mb-1 whitespace-nowrap overflow-hidden max-w-full',
   multiselectTagIcon:
     'multiselect__tag-icon cursor-pointer ml-2 absolute right-0 top-0 bottom-0 font-bold w-5 text-center leading-5 delay-200 transition-all ease-linear rounded',
   multiselectStrong: 'mb-2 leading-5 inline-block align-top',
@@ -26,6 +26,6 @@ export default {
   multiselectContent:
     'multiselect__content list-none inline-block p-0 m-0 min-w-full align-top',
   multiselectOption:
-    'multiselect__option block p-3 no-underline leading-4 normal-case align-middle relative cursor-pointer whitespace-no-wrap text-sm',
+    'multiselect__option block p-3 no-underline leading-4 normal-case align-middle relative cursor-pointer whitespace-nowrap text-sm',
   multiselectElement: 'multiselect__element block',
 }
diff --git a/resources/assets/js/components/theme/SwDropdown.js b/resources/assets/js/components/theme/SwDropdown.js
index 17b1de9e..bcf6815a 100644
--- a/resources/assets/js/components/theme/SwDropdown.js
+++ b/resources/assets/js/components/theme/SwDropdown.js
@@ -6,7 +6,7 @@ export default {
     itemContainer:
       'z-10 p-2 max-h-60 text-base text-left list-none rounded border-0 shadow bg-white text-black overflow-auto sw-scroll',
     item:
-      'flex p-2 text-sm font-light text-left text-black bg-transparent rounded cursor-pointer none hover:bg-gray-200 whitespace-no-wrap',
+      'flex p-2 text-sm font-light text-left text-black bg-transparent rounded cursor-pointer none hover:bg-gray-200 whitespace-nowrap',
     itemIcon: 'w-5 h-5 mr-3 text-secondary',
   },
   variants: {
@@ -16,7 +16,7 @@ export default {
       divider:
         'border-t border-solid border-gray-200 my-2 mx-0 overflow-hidden',
       item:
-        'flex p-0 text-sm font-light text-left text-black bg-transparent rounded cursor-pointer none hover:bg-gray-200 whitespace-no-wrap',
+        'flex p-0 text-sm font-light text-left text-black bg-transparent rounded cursor-pointer none hover:bg-gray-200 whitespace-nowrap',
       itemContainer:
         'z-10 p-2 text-base text-left list-none rounded border-0 shadow bg-white text-black',
       itemIcon: 'w-5 h-5 mr-3 text-secondary',
diff --git a/resources/assets/js/views/customers/partials/CustomerViewSidebar.vue b/resources/assets/js/views/customers/partials/CustomerViewSidebar.vue
index e5f9da10..1fc2eabf 100644
--- a/resources/assets/js/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/assets/js/views/customers/partials/CustomerViewSidebar.vue
@@ -35,10 +35,10 @@
           <sw-dropdown-item class="flex cursor-pointer">
             <sw-input-group class="-mt-3 font-normal">
               <sw-radio
-                :label="$t('customers.create_date')"
-                size="sm"
                 id="filter_create_date"
+                :label="$t('customers.create_date')"
                 v-model="searchData.orderByField"
+                size="sm"
                 name="filter"
                 value="invoices.created_at"
                 @change="onSearch"
@@ -49,10 +49,10 @@
           <sw-dropdown-item class="flex cursor-pointer">
             <sw-input-group class="-mt-3 font-normal">
               <sw-radio
-                :label="$t('customers.display_name')"
-                size="sm"
                 id="filter_display_name"
+                :label="$t('customers.display_name')"
                 v-model="searchData.orderByField"
+                size="sm"
                 name="filter"
                 value="users.name"
                 @change="onSearch"
@@ -62,8 +62,8 @@
         </sw-dropdown>
 
         <sw-button
-          class="ml-1"
           v-tooltip.top-center="{ content: getOrderName }"
+          class="ml-1"
           size="md"
           variant="gray-light"
           @click="sortData"
@@ -102,13 +102,13 @@
             {{ customer.name }}
           </div>
           <div
-            class="mt-1 text-xs not-italic font-medium leading-5 text-gray-600"
             v-if="customer.contact_name"
+            class="mt-1 text-xs not-italic font-medium leading-5 text-gray-600"
           >
             {{ customer.contact_name }}
           </div>
         </div>
-        <div class="flex-1 whitespace-no-wrap right">
+        <div class="flex-1 whitespace-nowrap right">
           <div
             class="text-xl not-italic font-semibold leading-8 text-right text-gray-900"
             v-html="$utils.formatMoney(customer.due_amount, customer.currency)"
diff --git a/resources/assets/js/views/errors/404.vue b/resources/assets/js/views/errors/404.vue
index eeb358fc..a7b5590a 100644
--- a/resources/assets/js/views/errors/404.vue
+++ b/resources/assets/js/views/errors/404.vue
@@ -9,7 +9,7 @@
           {{ $t('general.you_got_lost') }}
         </h5>
         <router-link
-          class="flex items-center w-32 h-12 px-2 py-1 text-base font-medium leading-none text-center text-white whitespace-no-wrap rounded bg-primary-500 btn-lg hover:text-white"
+          class="flex items-center w-32 h-12 px-2 py-1 text-base font-medium leading-none text-center text-white whitespace-nowrap rounded bg-primary-500 btn-lg hover:text-white"
           to="/admin/dashboard"
         >
           <arrow-left-icon class="mr-2 text-white icon" />
diff --git a/resources/assets/js/views/estimates/CustomerSelect.vue b/resources/assets/js/views/estimates/CustomerSelect.vue
index 79f04c92..db820fcb 100644
--- a/resources/assets/js/views/estimates/CustomerSelect.vue
+++ b/resources/assets/js/views/estimates/CustomerSelect.vue
@@ -25,7 +25,7 @@
         <div v-if="selectedCustomer.billing_address">
           <div class="flex flex-col">
             <label
-              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-no-wrap"
+              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-nowrap"
             >
               {{ $t('general.bill_to') }}
             </label>
@@ -77,7 +77,7 @@
         <div v-if="selectedCustomer.shipping_address">
           <div class="flex flex-col">
             <label
-              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-no-wrap"
+              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-nowrap"
             >
               {{ $t('general.ship_to') }}
             </label>
diff --git a/resources/assets/js/views/estimates/View.vue b/resources/assets/js/views/estimates/View.vue
index a79bb079..099a13a1 100644
--- a/resources/assets/js/views/estimates/View.vue
+++ b/resources/assets/js/views/estimates/View.vue
@@ -32,8 +32,8 @@
           </sw-dropdown-item>
 
           <sw-dropdown-item
-            tag-name="router-link"
             :to="`/admin/estimates/${$route.params.id}/edit`"
+            tag-name="router-link"
           >
             <pencil-icon class="h-5 mr-3 text-primary-800" />
             {{ $t('general.edit') }}
@@ -96,8 +96,8 @@
                 <sw-radio
                   id="filter_due_date"
                   v-model="searchData.orderByField"
-                  value="expiry_date"
                   :label="$t('estimates.due_date')"
+                  value="expiry_date"
                   size="sm"
                   name="filter"
                   @change="onSearched"
@@ -110,8 +110,8 @@
                 <sw-radio
                   id="filter_estimate_number"
                   v-model="searchData.orderByField"
-                  value="estimate_number"
                   :label="$t('estimates.estimate_number')"
+                  value="estimate_number"
                   size="sm"
                   name="filter"
                   @change="onSearched"
@@ -121,8 +121,8 @@
           </sw-dropdown>
 
           <sw-button
-            class="ml-1"
             v-tooltip.top-center="{ content: getOrderName }"
+            class="ml-1"
             size="md"
             variant="gray-light"
             @click="sortData"
@@ -168,15 +168,15 @@
             </div>
 
             <sw-badge
-              class="px-1 text-xs"
               :bg-color="$utils.getBadgeStatusColor(estimate.status).bgColor"
               :color="$utils.getBadgeStatusColor(estimate.status).color"
+              class="px-1 text-xs"
             >
               {{ estimate.status }}
             </sw-badge>
           </div>
 
-          <div class="flex-1 whitespace-no-wrap right">
+          <div class="flex-1 whitespace-nowrap right">
             <div
               class="mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
               v-html="
diff --git a/resources/assets/js/views/invoices/CustomerSelect.vue b/resources/assets/js/views/invoices/CustomerSelect.vue
index ab2059d5..cb50d6f6 100644
--- a/resources/assets/js/views/invoices/CustomerSelect.vue
+++ b/resources/assets/js/views/invoices/CustomerSelect.vue
@@ -27,7 +27,7 @@
         <div v-if="selectedCustomer.billing_address">
           <div class="flex flex-col">
             <label
-              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-no-wrap"
+              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-nowrap"
             >
               {{ $t('general.bill_to') }}
             </label>
@@ -79,7 +79,7 @@
         <div v-if="selectedCustomer.shipping_address" class="col col-6">
           <div class="flex flex-col">
             <label
-              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-no-wrap"
+              class="mb-1 text-sm font-medium text-gray-500 uppercase whitespace-nowrap"
             >
               {{ $t('general.ship_to') }}
             </label>
diff --git a/resources/assets/js/views/invoices/Item.vue b/resources/assets/js/views/invoices/Item.vue
index fc307910..163fb3d2 100644
--- a/resources/assets/js/views/invoices/Item.vue
+++ b/resources/assets/js/views/invoices/Item.vue
@@ -83,7 +83,7 @@
                     <sw-button
                       slot="activator"
                       type="button"
-                      class="flex items-center px-5 py-1 text-sm font-medium leading-none text-center text-gray-500 whitespace-no-wrap border border-gray-300 border-solid rounded rounded-tl-none rounded-bl-none dropdown-toggle"
+                      class="flex items-center px-5 py-1 text-sm font-medium leading-none text-center text-gray-500 whitespace-nowrap border border-gray-300 border-solid rounded rounded-tl-none rounded-bl-none dropdown-toggle"
                       data-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false"
diff --git a/resources/assets/js/views/invoices/View.vue b/resources/assets/js/views/invoices/View.vue
index 0e90321e..1fc76bfc 100644
--- a/resources/assets/js/views/invoices/View.vue
+++ b/resources/assets/js/views/invoices/View.vue
@@ -27,8 +27,8 @@
             invoice.status === 'OVERDUE' ||
             invoice.status === 'VIEWED'
           "
-          tag-name="router-link"
           :to="`/admin/payments/${$route.params.id}/create`"
+          tag-name="router-link"
           variant="primary"
           class="text-sm"
         >
@@ -45,8 +45,8 @@
           </sw-dropdown-item>
 
           <sw-dropdown-item
-            tag-name="router-link"
             :to="`/admin/invoices/${$route.params.id}/edit`"
+            tag-name="router-link"
           >
             <pencil-icon class="h-5 mr-3 text-gray-600" />
             {{ $t('general.edit') }}
@@ -125,10 +125,10 @@
                 <sw-radio
                   id="filter_invoice_number"
                   v-model="searchData.orderByField"
+                  :label="$t('invoices.invoice_number')"
                   size="sm"
                   type="radio"
                   name="filter"
-                  :label="$t('invoices.invoice_number')"
                   value="invoice_number"
                   @change="onSearch"
                 />
@@ -137,8 +137,8 @@
           </sw-dropdown>
 
           <sw-button
-            class="ml-1"
             v-tooltip.top-center="{ content: getOrderName }"
+            class="ml-1"
             size="md"
             variant="gray-light"
             @click="sortData"
@@ -184,16 +184,16 @@
             </div>
 
             <sw-badge
-              class="px-1 text-xs"
               :bg-color="$utils.getBadgeStatusColor(invoice.status).bgColor"
               :color="$utils.getBadgeStatusColor(invoice.status).color"
               :font-size="$utils.getBadgeStatusColor(invoice.status).fontSize"
+              class="px-1 text-xs"
             >
               {{ invoice.status }}
             </sw-badge>
           </div>
 
-          <div class="flex-1 whitespace-no-wrap right">
+          <div class="flex-1 whitespace-nowrap right">
             <div
               class="mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
               v-html="
diff --git a/resources/assets/js/views/payments/View.vue b/resources/assets/js/views/payments/View.vue
index da2957cb..01055801 100644
--- a/resources/assets/js/views/payments/View.vue
+++ b/resources/assets/js/views/payments/View.vue
@@ -20,8 +20,8 @@
           </sw-dropdown-item>
 
           <sw-dropdown-item
-            tag-name="router-link"
             :to="`/admin/payments/${$route.params.id}/edit`"
+            tag-name="router-link"
           >
             <pencil-icon class="h-5 mr-3 text-gray-600" />
             {{ $t('general.edit') }}
@@ -68,10 +68,10 @@
             <sw-dropdown-item class="flex cursor-pointer">
               <sw-input-group class="-mt-3 font-normal">
                 <sw-radio
-                  :label="$t('invoices.title')"
-                  size="sm"
                   id="filter_invoice_number"
+                  :label="$t('invoices.title')"
                   v-model="searchData.orderByField"
+                  size="sm"
                   name="filter"
                   value="invoice_number"
                   @change="onSearch"
@@ -82,10 +82,10 @@
             <sw-dropdown-item class="flex cursor-pointer">
               <sw-input-group class="-mt-3 font-normal">
                 <sw-radio
-                  :label="$t('payments.date')"
-                  size="sm"
                   id="filter_payment_date"
+                  :label="$t('payments.date')"
                   v-model="searchData.orderByField"
+                  size="sm"
                   name="filter"
                   value="payment_date"
                   @change="onSearch"
@@ -109,8 +109,8 @@
           </sw-dropdown>
 
           <sw-button
-            class="ml-1"
             v-tooltip.top-center="{ content: getOrderName }"
+            class="ml-1"
             size="md"
             variant="gray-light"
             @click="sortData"
@@ -162,7 +162,7 @@
             </div>
           </div>
 
-          <div class="flex-1 whitespace-no-wrap right">
+          <div class="flex-1 whitespace-nowrap right">
             <div
               class="mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
               v-html="$utils.formatMoney(payment.amount, payment.user.currency)"
diff --git a/resources/assets/js/views/reports/ExpensesReport.vue b/resources/assets/js/views/reports/ExpensesReport.vue
index f371d652..5ec69f5e 100644
--- a/resources/assets/js/views/reports/ExpensesReport.vue
+++ b/resources/assets/js/views/reports/ExpensesReport.vue
@@ -65,7 +65,7 @@
       />
 
       <a
-        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
+        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-nowrap rounded md:hidden bg-primary-500"
         @click="viewReportsPDF"
       >
         <document-text-icon />
diff --git a/resources/assets/js/views/reports/ProfitLossReport.vue b/resources/assets/js/views/reports/ProfitLossReport.vue
index 439285af..b040fc76 100644
--- a/resources/assets/js/views/reports/ProfitLossReport.vue
+++ b/resources/assets/js/views/reports/ProfitLossReport.vue
@@ -67,7 +67,7 @@
       />
 
       <a
-        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
+        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-nowrap rounded md:hidden bg-primary-500"
         @click="viewReportsPDF"
       >
         <document-text-icon />
diff --git a/resources/assets/js/views/reports/SalesReports.vue b/resources/assets/js/views/reports/SalesReports.vue
index 52621d0d..cf1e5e4d 100644
--- a/resources/assets/js/views/reports/SalesReports.vue
+++ b/resources/assets/js/views/reports/SalesReports.vue
@@ -79,7 +79,7 @@
         class="hidden w-full h-screen border-gray-100 border-solid rounded md:flex"
       />
       <a
-        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
+        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-nowrap rounded md:hidden bg-primary-500"
         @click="viewReportsPDF"
       >
         <document-text-icon />
diff --git a/resources/assets/js/views/reports/TaxReport.vue b/resources/assets/js/views/reports/TaxReport.vue
index adf9237c..57e1573d 100644
--- a/resources/assets/js/views/reports/TaxReport.vue
+++ b/resources/assets/js/views/reports/TaxReport.vue
@@ -61,7 +61,7 @@
         class="hidden w-full h-screen border-gray-100 border-solid rounded md:flex"
       />
       <a
-        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
+        class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-nowrap rounded md:hidden bg-primary-500"
         @click="viewReportsPDF"
       >
         <document-text-icon />
diff --git a/resources/assets/js/views/settings/BackupSetting.vue b/resources/assets/js/views/settings/BackupSetting.vue
index f4aef904..f91562dd 100644
--- a/resources/assets/js/views/settings/BackupSetting.vue
+++ b/resources/assets/js/views/settings/BackupSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative setting-main-container backup">
     <sw-card variant="setting-card">
-      <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+      <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
         <div>
           <h6 class="sw-section-title">
             {{ $tc('settings.backup.title', 1) }}
diff --git a/resources/assets/js/views/settings/CustomFieldsSetting.vue b/resources/assets/js/views/settings/CustomFieldsSetting.vue
index 496c2677..3eac712b 100644
--- a/resources/assets/js/views/settings/CustomFieldsSetting.vue
+++ b/resources/assets/js/views/settings/CustomFieldsSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <sw-card variant="setting-card">
-    <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+    <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
       <div>
         <h6 class="sw-section-title">
           {{ $t('settings.menu_title.custom_fields') }}
diff --git a/resources/assets/js/views/settings/ExpenseCategorySetting.vue b/resources/assets/js/views/settings/ExpenseCategorySetting.vue
index f77c09e0..f1ac7046 100644
--- a/resources/assets/js/views/settings/ExpenseCategorySetting.vue
+++ b/resources/assets/js/views/settings/ExpenseCategorySetting.vue
@@ -1,6 +1,6 @@
 <template>
   <sw-card variant="setting-card">
-    <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+    <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
       <div>
         <h6 class="sw-section-title">
           {{ $t('settings.expense_category.title') }}
@@ -51,7 +51,7 @@
           }}</span>
           <div class="w-48 overflow-hidden notes">
             <div
-              class="overflow-hidden whitespace-no-wrap"
+              class="overflow-hidden whitespace-nowrap"
               style="text-overflow: ellipsis"
             >
               {{ row.description }}
diff --git a/resources/assets/js/views/settings/FileDiskSetting.vue b/resources/assets/js/views/settings/FileDiskSetting.vue
index ead9aeb4..a0bb98ed 100644
--- a/resources/assets/js/views/settings/FileDiskSetting.vue
+++ b/resources/assets/js/views/settings/FileDiskSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="setting-main-container backup">
     <sw-card variant="setting-card">
-      <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+      <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
         <div>
           <h6 class="sw-section-title">
             {{ $tc('settings.disk.title', 1) }}
diff --git a/resources/assets/js/views/settings/NotesSetting.vue b/resources/assets/js/views/settings/NotesSetting.vue
index ab2863e1..b42541da 100644
--- a/resources/assets/js/views/settings/NotesSetting.vue
+++ b/resources/assets/js/views/settings/NotesSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <sw-card variant="setting-card">
-    <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+    <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
       <div>
         <h6 class="sw-section-title">
           {{ $t('settings.customization.notes.title') }}
diff --git a/resources/assets/js/views/settings/PaymentsModeSetting.vue b/resources/assets/js/views/settings/PaymentsModeSetting.vue
index aaece781..f6206d83 100644
--- a/resources/assets/js/views/settings/PaymentsModeSetting.vue
+++ b/resources/assets/js/views/settings/PaymentsModeSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <sw-card variant="setting-card">
-    <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+    <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
       <div>
         <h6 class="sw-section-title">
           {{ $t('settings.customization.payments.payment_modes') }}
diff --git a/resources/assets/js/views/settings/TaxTypesSetting.vue b/resources/assets/js/views/settings/TaxTypesSetting.vue
index 3d491d65..50e8127c 100644
--- a/resources/assets/js/views/settings/TaxTypesSetting.vue
+++ b/resources/assets/js/views/settings/TaxTypesSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <sw-card variant="setting-card">
-    <div slot="header" class="flex flex-wrap justify-between lg:flex-no-wrap">
+    <div slot="header" class="flex flex-wrap justify-between lg:flex-nowrap">
       <div>
         <h6 class="sw-section-title">
           {{ $t('settings.tax_types.title') }}
diff --git a/resources/assets/js/views/settings/UserProfileSetting.vue b/resources/assets/js/views/settings/UserProfileSetting.vue
index 4844b3cf..0aa68623 100644
--- a/resources/assets/js/views/settings/UserProfileSetting.vue
+++ b/resources/assets/js/views/settings/UserProfileSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="updateUserData" class="relative h-full">
+  <form class="relative h-full" @submit.prevent="updateUserData">
     <base-loader v-if="isRequestOnGoing" :show-bg-overlay="true" />
     <sw-card variant="setting-card">
       <template slot="header">
@@ -17,7 +17,7 @@
       <div class="grid mb-4 md:grid-cols-6">
         <div>
           <label
-            class="text-sm not-italic font-medium leading-4 text-black whitespace-no-wrap"
+            class="text-sm not-italic font-medium leading-4 text-black whitespace-nowrap"
           >
             {{ $tc('settings.account_settings.profile_picture') }}
           </label>
@@ -114,9 +114,9 @@
       </div>
 
       <sw-button
-        class="mt-6"
         :loading="isLoading"
         :disabled="isLoading"
+        class="mt-6"
         variant="primary"
       >
         <save-icon v-if="!isLoading" class="mr-2 -ml-1" />
diff --git a/resources/assets/js/views/settings/customization-tabs/ItemsTab.vue b/resources/assets/js/views/settings/customization-tabs/ItemsTab.vue
index db782ff3..ae91b4cd 100644
--- a/resources/assets/js/views/settings/customization-tabs/ItemsTab.vue
+++ b/resources/assets/js/views/settings/customization-tabs/ItemsTab.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex flex-wrap justify-end mt-8 lg:flex-no-wrap">
+    <div class="flex flex-wrap justify-end mt-8 lg:flex-nowrap">
       <sw-button size="lg" variant="primary-outline" @click="addItemUnit">
         <plus-icon class="w-6 h-6 mr-1 -ml-2" />
         {{ $t('settings.customization.items.add_item_unit') }}