Move word wrapping style, reuse for email in user preferences

Author: guerler

client/src/components/Common/Heading.vue

@@ -53,7 +53,7 @@ const element = computed(() => {
 </script>
 
 <template>
-    <div v-if="props.separator" class="separator heading">
+    <div v-if="props.separator" class="separator heading word-wrap-break">
         <GButton v-if="collapsible" transparent size="small" icon-only inline @click="$emit('click')">
             <FontAwesomeIcon v-if="collapsed" fixed-width :icon="faAngleDoubleDown" />
             <FontAwesomeIcon v-else fixed-width :icon="faAngleDoubleUp" />
@@ -75,7 +75,7 @@ const element = computed(() => {
     <component
         :is="element"
         v-else
-        class="heading"
+        class="heading word-wrap-break"
         :class="[
             sizeClass,
             props.bold ? 'font-weight-bold' : '',
@@ -96,12 +96,6 @@ const element = computed(() => {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.heading {
-    overflow-wrap: break-word;
-    white-space: normal;
-    word-break: break-word;
-}
-
 // prettier-ignore
 h1, h2, h3, h4, h5, h6 {
     &:not(.truncate) {

client/src/components/User/UserDetailsElement.vue

@@ -45,6 +45,7 @@ const getStoragePercentageClass = (percentage: number) => {
                     <FontAwesomeIcon :icon="faAt" class="user-details-icon p-2" />
                     <span
                         id="user-preferences-current-email"
+                        class="word-wrap-break"
                         v-b-tooltip.hover.noninteractive
                         title="Your email address">
                         {{ userEmail }}

client/src/style/scss/ui.scss

@@ -49,6 +49,12 @@
     word-wrap: normal;
 }
 
+.word-wrap-break {
+    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: break-word;
+}
+
 // utility class to set white space wrapping to normal
 .white-space-normal {
     white-space: normal;