From 3d34887cbf524367eedbc8a8f7481ff0133c246a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:52:14 +0200
Subject: [PATCH] Task/improve style in features page (#8029)

Improve style
---
 .../src/app/pages/features/features-page.html | 32 ++++++++++---------
 .../src/app/pages/features/features-page.scss |  8 +++++
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/app/pages/features/features-page.html b/apps/client/src/app/pages/features/features-page.html
index 4014d7789d..7cc80901f8 100644
--- a/apps/client/src/app/pages/features/features-page.html
+++ b/apps/client/src/app/pages/features/features-page.html
@@ -137,10 +137,10 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex">
+                <h4 class="gf-text-wrap-balance">
                   <span i18n>Portfolio Calculations</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="ml-1" />
+                    <gf-premium-indicator class="d-inline-block ml-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -157,10 +157,10 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex">
+                <h4 class="gf-text-wrap-balance">
                   <span i18n>Portfolio Allocations</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="ml-1" />
+                    <gf-premium-indicator class="d-inline-block ml-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -175,10 +175,10 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex">
+                <h4 class="gf-text-wrap-balance">
                   <span i18n>Static Analysis</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="ml-1" />
+                    <gf-premium-indicator class="d-inline-block ml-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -193,10 +193,10 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex">
+                <h4 class="gf-text-wrap-balance">
                   <span i18n>Watchlist</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="ml-1" />
+                    <gf-premium-indicator class="d-inline-block ml-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -211,12 +211,14 @@
             <mat-card-content>
               <div class="flex-grow-1">
                 <h4 class="align-items-center d-flex">
-                  <span>Ghostfolio MCP</span>
-                  @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="ml-1" />
-                  }
+                  <span class="gf-text-wrap-balance">
+                    <span>Ghostfolio MCP</span>
+                    @if (hasPermissionForSubscription) {
+                      <gf-premium-indicator class="d-inline-block ml-1" />
+                    }
+                  </span>
                   <span
-                    class="badge badge-pill badge-secondary ml-2 text-uppercase"
+                    class="badge badge-pill badge-secondary ml-auto text-uppercase"
                     i18n
                     >new</span
                   >
@@ -234,9 +236,9 @@
             <mat-card appearance="outlined" class="d-flex flex-column h-100">
               <mat-card-content>
                 <div class="flex-grow-1">
-                  <h4 class="align-items-center d-flex">
+                  <h4 class="gf-text-wrap-balance">
                     <span i18n>Market Mood</span>
-                    <gf-premium-indicator class="ml-1" />
+                    <gf-premium-indicator class="d-inline-block ml-1" />
                   </h4>
                   <p class="m-0">
                     Check the current market mood (<a
diff --git a/apps/client/src/app/pages/features/features-page.scss b/apps/client/src/app/pages/features/features-page.scss
index c3109fdf7d..6c38386e1a 100644
--- a/apps/client/src/app/pages/features/features-page.scss
+++ b/apps/client/src/app/pages/features/features-page.scss
@@ -10,6 +10,14 @@
       color: rgba(var(--palette-primary-300), 1);
     }
   }
+
+  gf-premium-indicator {
+    vertical-align: -0.125em;
+  }
+
+  .badge {
+    font-size: 0.75rem;
+  }
 }
 
 :host-context(.theme-dark) {