Merge pull request #21009 from guerler/fix_user_preferences_styles

Fix content wrapping in cards and preference title

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,10 +96,6 @@ const element = computed(() => {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.heading {
-    word-break: break-all;
-}
-
 // prettier-ignore
 h1, h2, h3, h4, h5, h6 {
     &:not(.truncate) {

client/src/components/User/UserDetailsElement.vue

@@ -35,17 +35,18 @@ const getStoragePercentageClass = (percentage: number) => {
         <div class="user-details d-flex flex-gapx-1 flex-gapy-1 w-100 justify-content-between">
             <div class="d-flex align-items-center flex-gapx-1">
                 <div class="d-flex align-items-center flex-gapx-1 mr-5">
-                    <FontAwesomeIcon :icon="faUser" class="user-details-icon" />
+                    <FontAwesomeIcon :icon="faUser" class="user-details-icon p-2" />
                     <span v-b-tooltip.hover.noninteractive title="Your username (public name)">
                         {{ userUsername }}
                     </span>
                 </div>
 
                 <div class="d-flex align-items-center flex-gapx-1">
-                    <FontAwesomeIcon :icon="faAt" class="user-details-icon" />
+                    <FontAwesomeIcon :icon="faAt" class="user-details-icon p-2" />
                     <span
                         id="user-preferences-current-email"
                         v-b-tooltip.hover.noninteractive
+                        class="word-wrap-break"
                         title="Your email address">
                         {{ userEmail }}
                     </span>
@@ -95,10 +96,10 @@ const getStoragePercentageClass = (percentage: number) => {
 
         .user-details-icon {
             color: $brand-primary;
-            font-size: 1rem;
-            border: 1px solid $brand-primary;
-            border-radius: 0.75rem;
-            padding: 0.5rem;
+            font-size: $h5-font-size;
+            border: $border-default;
+            border-color: $brand-primary;
+            border-radius: $border-radius-extralarge;
         }
     }
 }

client/src/components/User/UserPreferences.vue

@@ -154,9 +154,8 @@ onMounted(async () => {
     <div class="d-flex flex-column">
         <BreadcrumbHeading :items="breadcrumbItems" />
 
-        <Heading h2 size="md">
-            This page allows you to manage your user preferences. You can change your email address, password, and other
-            settings here.
+        <Heading h2 size="sm">
+            Manage your user preferences on this page, including email address, password, and other settings.
         </Heading>
 
         <BAlert :variant="messageVariant" :show="!!message">

client/src/style/scss/ui.scss

@@ -44,6 +44,13 @@
     overflow-y: auto !important;
 }
 
+// utility class to wrap words or break if necessary
+.word-wrap-break {
+    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: break-word;
+}
+
 // utility class to set word wrap to normal
 .word-wrap-normal {
     word-wrap: normal;