From a661ddee3112f56362a528a6406c1373c1b3c4fd Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 12 Jan 2025 11:22:57 +0100
Subject: [PATCH] Improve alignment

---
 apps/client/src/app/pages/pricing/pricing-page.html | 8 +++++---
 apps/client/src/app/pages/pricing/pricing-page.scss | 6 ++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index ef8a41feb..3124d99b1 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -178,10 +178,12 @@
             class="h-100"
             [ngClass]="{ active: user?.subscription?.type === 'Premium' }"
           >
-            @if (label) {
-              <mat-card-title>{{ label }}</mat-card-title>
-            }
             <mat-card-content class="d-flex flex-column h-100">
+              @if (label) {
+                <div class="badge-container position-absolute text-right">
+                  <span class="badge badge-warning m-1">{{ label }}</span>
+                </div>
+              }
               <div class="flex-grow-1">
                 <div class="align-items-center d-flex mb-2">
                   <h4 class="align-items-center d-flex flex-grow-1 m-0">
diff --git a/apps/client/src/app/pages/pricing/pricing-page.scss b/apps/client/src/app/pages/pricing/pricing-page.scss
index ad8e97b19..c92ca364f 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.scss
+++ b/apps/client/src/app/pages/pricing/pricing-page.scss
@@ -23,6 +23,12 @@
     ion-icon[name='checkmark-circle-outline'] {
       color: rgba(var(--palette-primary-500), 1);
     }
+
+    .badge-container {
+      left: 0;
+      right: 0;
+      top: 0;
+    }
   }
 }