From 1e5aa3c06b72a1a5e629438e80c15ae372d0eab8 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 15 Apr 2026 01:10:25 +0200
Subject: [PATCH] fix: align organisation page header layout with platform
 design

Match the header structure of /organisation to /platform/organisations/[id]:
wrap name+chip in a flex row with gap-x-2, place timestamp as span
below it inside the same container div.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/app/src/pages/organisation/index.vue | 34 +++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/app/src/pages/organisation/index.vue b/apps/app/src/pages/organisation/index.vue
index da47cf0d..6f31aa94 100644
--- a/apps/app/src/pages/organisation/index.vue
+++ b/apps/app/src/pages/organisation/index.vue
@@ -221,18 +221,23 @@ function confirmRevokeInvitation() {
 
     <template v-else-if="organisation">
       <!-- Header -->
-      <div class="d-flex justify-space-between align-center mb-2">
-        <div class="d-flex align-center gap-x-3">
-          <h4 class="text-h4">
-            {{ organisation.name }}
-            <span class="text-body-2 text-medium-emphasis font-weight-regular ms-2">{{ organisation.slug }}</span>
-          </h4>
-          <VChip
-            :color="statusColor[organisation.billing_status]"
-            size="small"
-          >
-            {{ organisation.billing_status }}
-          </VChip>
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div>
+          <div class="d-flex align-center gap-x-2">
+            <h4 class="text-h4">
+              {{ organisation.name }}
+              <span class="text-body-2 text-medium-emphasis font-weight-regular ms-2">{{ organisation.slug }}</span>
+            </h4>
+            <VChip
+              :color="statusColor[organisation.billing_status]"
+              size="small"
+            >
+              {{ organisation.billing_status }}
+            </VChip>
+          </div>
+          <span class="text-caption text-medium-emphasis">
+            Aangemaakt op {{ formatDate(organisation.created_at) }}
+          </span>
         </div>
         <VBtn
           v-if="isOrgAdmin"
@@ -243,11 +248,6 @@ function confirmRevokeInvitation() {
         </VBtn>
       </div>
 
-      <!-- Timestamps -->
-      <p class="text-caption text-medium-emphasis mb-6">
-        Aangemaakt op {{ formatDate(organisation.created_at) }}
-      </p>
-
       <!-- Tabs -->
       <VTabs
         v-model="activeTab"