fix: responsiveness of title buttons on mobile devices

This commit is contained in:
2025-11-25 22:27:17 +01:00
parent 62ff4826c1
commit 4cdaa2e72f
3 changed files with 9 additions and 7 deletions

View File

@@ -23,7 +23,7 @@
<Card style={cardStyle} class="h-full flex flex-col"> <Card style={cardStyle} class="h-full flex flex-col">
<CardHeader class="flex-shrink-0"> <CardHeader class="flex-shrink-0">
<div class="flex items-center justify-between gap-2"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0"> <CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
<span class="truncate">{title}</span> <span class="truncate">{title}</span>
</CardTitle> </CardTitle>

View File

@@ -46,13 +46,15 @@
<Card> <Card>
<CardHeader> <CardHeader>
<div class="flex items-center justify-between"> <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div> <div class="flex-1 min-w-0">
<CardTitle>{title}</CardTitle> <CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription> <CardDescription>{description}</CardDescription>
</div> </div>
{#if headerAction} {#if headerAction}
{@render headerAction()} <div class="flex-shrink-0">
{@render headerAction()}
</div>
{/if} {/if}
</div> </div>
{#if searchBar} {#if searchBar}

View File

@@ -46,14 +46,14 @@
<div class="min-h-screen flex items-center justify-center p-4"> <div class="min-h-screen flex items-center justify-center p-4">
<Card class="w-full max-w-lg"> <Card class="w-full max-w-lg">
<CardHeader> <CardHeader>
<div class="flex items-center justify-between"> <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div> <div class="flex-1 min-w-0">
<CardTitle class="text-3xl">{t.wishlist.createTitle}</CardTitle> <CardTitle class="text-3xl">{t.wishlist.createTitle}</CardTitle>
<CardDescription> <CardDescription>
{t.wishlist.createDescription} {t.wishlist.createDescription}
</CardDescription> </CardDescription>
</div> </div>
<div class="flex items-center gap-1 sm:gap-2"> <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
<LanguageToggle /> <LanguageToggle />
<ThemeToggle /> <ThemeToggle />
{#if data.session?.user} {#if data.session?.user}