Profile settings buttons style fixes

src/components/ProfileSettings/ProfileSettings.tsx

@@ -348,7 +348,12 @@ export const ProfileSettings = () => {
                         <Button
                           class={styles.cancel}
                           variant="light"
-                          value={t('Cancel changes')}
+                          value={
+                            <>
+                              <span class={styles.cancelLabel}>{t('Cancel changes')}</span>
+                              <span class={styles.cancelLabelMobile}>{t('Cancel')}</span>
+                            </>
+                          }
                           onClick={handleCancel}
                         />
                         <Button onClick={handleSubmit} variant="primary" value={t('Save settings')} />

src/pages/profile/Settings.module.scss

@@ -302,6 +302,20 @@ h5 {
     padding: 0.8rem 0 !important;
   }
 
+  .cancelLabel {
+    @include media-breakpoint-down(sm) {
+      display: none;
+    }
+  }
+
+  .cancelLabelMobile {
+    display: none;
+
+    @include media-breakpoint-down(sm) {
+      display: block;
+    }
+  }
+
   :global(.row) > * {
     margin-bottom: 0;
   }