From 6b61d639395c05e31e04350ffc1f60c78ef76108 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:44:08 +0200
Subject: [PATCH] Improve style

---
 .../src/app/pages/features/features-page.html | 32 ++++++++++---------
 1 file changed, 17 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