From 469f496808b1e2379ada8aa882ae36e72b32f25c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 5 Oct 2025 11:50:09 +0300
Subject: [PATCH 1/6] Reduce size of info string

---
 client/src/components/User/UserPreferences.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index 3c6e179db6b..805eec19db3 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -154,7 +154,7 @@ onMounted(async () => {
     <div class="d-flex flex-column">
         <BreadcrumbHeading :items="breadcrumbItems" />
 
-        <Heading h2 size="md">
+        <Heading h2 size="sm">
             This page allows you to manage your user preferences. You can change your email address, password, and other
             settings here.
         </Heading>

From d77015a1f4b61a8348048707b49c74f641c43684 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 5 Oct 2025 11:51:38 +0300
Subject: [PATCH 2/6] Update info text

---
 client/src/components/User/UserPreferences.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index 805eec19db3..e5817d94ebf 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -155,8 +155,7 @@ onMounted(async () => {
         <BreadcrumbHeading :items="breadcrumbItems" />
 
         <Heading h2 size="sm">
-            This page allows you to manage your user preferences. You can change your email address, password, and other
-            settings here.
+            Manage your user preferences on this page, including email address, password, and other settings.
         </Heading>
 
         <BAlert :variant="messageVariant" :show="!!message">

From d48a67e0bf74fced2c1ecbd1522f84a6ed6c321f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 5 Oct 2025 12:05:29 +0300
Subject: [PATCH 3/6] Fix overflow in headings

---
 client/src/components/Common/Heading.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 26aa6841c17..1f4e53e8e29 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -97,7 +97,9 @@ const element = computed(() => {
 @import "scss/theme/blue.scss";
 
 .heading {
-    word-break: break-all;
+    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: break-word;
 }
 
 // prettier-ignore

From 384d1a018bc042053186898a1d198c623ee0dfcc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 5 Oct 2025 12:23:28 +0300
Subject: [PATCH 4/6] Avoid unnecessary custom styles which break theming

---
 client/src/components/User/UserDetailsElement.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/User/UserDetailsElement.vue b/client/src/components/User/UserDetailsElement.vue
index 2a64e7e432e..4b91bfcfdd0 100644
--- a/client/src/components/User/UserDetailsElement.vue
+++ b/client/src/components/User/UserDetailsElement.vue
@@ -35,14 +35,14 @@ 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
@@ -95,10 +95,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;
         }
     }
 }

From cbc4aae8d668427940dcfaf8926aa6d8a8ff03bd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 5 Oct 2025 12:27:31 +0300
Subject: [PATCH 5/6] Move word wrapping style, reuse for email in user
 preferences

---
 client/src/components/Common/Heading.vue          | 10 ++--------
 client/src/components/User/UserDetailsElement.vue |  1 +
 client/src/style/scss/ui.scss                     |  6 ++++++
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 1f4e53e8e29..90ff19455a4 100644
--- a/client/src/components/Common/Heading.vue
+++ b/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) {
diff --git a/client/src/components/User/UserDetailsElement.vue b/client/src/components/User/UserDetailsElement.vue
index 4b91bfcfdd0..4d26d8e0245 100644
--- a/client/src/components/User/UserDetailsElement.vue
+++ b/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 }}
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 468e35e00a4..6bfc9862eed 100644
--- a/client/src/style/scss/ui.scss
+++ b/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;

From 044c123161a20c32914e8c4297ad9da8e5c2ab4b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 6 Oct 2025 07:27:54 +0300
Subject: [PATCH 6/6] Fix lint, declare tooltip before class

---
 client/src/components/User/UserDetailsElement.vue |  2 +-
 client/src/style/scss/ui.scss                     | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/User/UserDetailsElement.vue b/client/src/components/User/UserDetailsElement.vue
index 4d26d8e0245..f3974276427 100644
--- a/client/src/components/User/UserDetailsElement.vue
+++ b/client/src/components/User/UserDetailsElement.vue
@@ -45,8 +45,8 @@ 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
+                        class="word-wrap-break"
                         title="Your email address">
                         {{ userEmail }}
                     </span>
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 6bfc9862eed..238f093d750 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -44,17 +44,18 @@
     overflow-y: auto !important;
 }
 
-// utility class to set word wrap to normal
-.word-wrap-normal {
-    word-wrap: normal;
-}
-
+// 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;
+}
+
 // utility class to set white space wrapping to normal
 .white-space-normal {
     white-space: normal;