style: make sure button is always big enough for text on tools page

This commit is contained in:
tonyaellie
2025-04-29 09:53:38 +00:00
parent 2a6366808c
commit f1c9aab9df

View File

@@ -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>