From 2921182a3b3268aca3bddd1f2a5450427ccdd6d6 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 31 Jul 2025 21:37:19 -0400
Subject: [PATCH] Ensure card titles get at least 50% width

Add responsive layout to GCard header that prevents badges from
squashing the title. Title section now has min-width of 50% and
badges wrap to next line when needed.
---
 client/src/components/Common/GCard.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Common/GCard.vue b/client/src/components/Common/GCard.vue
index 95bbd4f7557..8d5ee2e6ea2 100644
--- a/client/src/components/Common/GCard.vue
+++ b/client/src/components/Common/GCard.vue
@@ -323,8 +323,8 @@ function onKeyDown(event: KeyboardEvent) {
                 <div class="d-flex flex-column flex-gapy-1">
                     <div
                         :id="`g-card-${props.id}-header`"
-                        class="d-flex flex-gapy-1 flex-gapx-1 justify-content-between">
-                        <div class="d-flex flex-column">
+                        class="d-flex flex-wrap flex-gapy-1 flex-gapx-1 justify-content-between">
+                        <div class="d-flex flex-column flex-grow-1 g-card-title-section">
                             <div class="d-flex">
                                 <div v-if="selectable">
                                     <slot name="select">
@@ -416,7 +416,7 @@ function onKeyDown(event: KeyboardEvent) {
                             </div>
                         </div>
 
-                        <div class="align-items-start d-flex flex-row-reverse flex-wrap gap-1">
+                        <div class="align-items-start d-flex flex-row-reverse flex-wrap gap-1 flex-shrink-0">
                             <div>
                                 <slot v-if="props.showBookmark" name="bookmark">
                                     <BButton
@@ -733,6 +733,10 @@ function onKeyDown(event: KeyboardEvent) {
         }
     }
 
+    .g-card-title-section {
+        min-width: 50%;
+    }
+
     .g-card-rename {
         visibility: hidden;
     }