From f1c9aab9df352b78df5e8f716906516f823a8db0 Mon Sep 17 00:00:00 2001
From: tonyaellie <tonya@tokia.dev>
Date: Tue, 29 Apr 2025 09:53:38 +0000
Subject: [PATCH] style: make sure button is always big enough for text on
 tools page

---
 frontend/components/DetailAction.vue | 34 +++++++++++++++-------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/components/DetailAction.vue b/frontend/components/DetailAction.vue
index 8eb96fc8..7ddfa434 100644
--- a/frontend/components/DetailAction.vue
+++ b/frontend/components/DetailAction.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="grid grid-cols-1 gap-10 py-6 md:grid-cols-4">
-    <div class="col-span-3">
+  <div class="flex flex-col gap-10 py-6 md:flex-row">
+    <div class="flex-1">
       <h4 class="mb-1 text-lg font-semibold">
         <slot name="title"></slot>
       </h4>
@@ -8,20 +8,22 @@
         <slot></slot>
       </p>
     </div>
-    <template v-if="to">
-      <NuxtLink class="mt-auto" :to="to" :class="buttonVariants({ size: 'lg' })">
-        <slot name="button">
-          <slot name="title"></slot>
-        </slot>
-      </NuxtLink>
-    </template>
-    <template v-else>
-      <Button class="mt-auto" size="lg" @click="$emit('action')">
-        <slot name="button">
-          <slot name="title"></slot>
-        </slot>
-      </Button>
-    </template>
+    <div class="flex items-center">
+      <template v-if="to">
+        <NuxtLink :to="to" :class="buttonVariants({ size: 'lg' })" class="min-w-52 grow">
+          <slot name="button">
+            <slot name="title"></slot>
+          </slot>
+        </NuxtLink>
+      </template>
+      <template v-else>
+        <Button class="min-w-52 grow" size="lg" @click="$emit('action')">
+          <slot name="button">
+            <slot name="title"></slot>
+          </slot>
+        </Button>
+      </template>
+    </div>
   </div>
 </template>