patrick/bullseye-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dynamic text sizing in habit cells

Browse Source
This commit is contained in:
Patrick Jaroszewski
2026-03-03 11:51:09 -05:00
parent 6a9a35c3fe
commit ea9d68f507
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/habits/CounterHabitButton.svelte
+12 -3
View File
@@ -77,6 +77,15 @@
const displayUnit = $derived(getDisplayUnit(unit));
// Dynamic font size based on digit count
const fontSize = $derived.by(() => {
const digits = count.toString().length;
if (digits <= 2) return 'text-lg';
if (digits === 3) return 'text-base';
if (digits === 4) return 'text-sm';
return 'text-xs';
});
let checked = $derived(count >= target);
let showConfetti = $state(false);
// svelte-ignore state_referenced_locally
@@ -188,7 +197,7 @@
{#if displayUnit.text && displayUnit.isShort}
<!-- Single letter unit: horizontal layout -->
<div class="flex items-baseline gap-1">
<NumberFlow value={count} class={cn("font-semibold text-lg", hideNumber && "invisible")} />
<NumberFlow value={count} class={cn("font-semibold tabular-nums", fontSize, hideNumber && "invisible")} />
{#if count > 0}
<span class="text-[11px] opacity-75 font-medium uppercase">{displayUnit.text}</span>
{/if}
@@ -196,14 +205,14 @@
{:else if displayUnit.text && !displayUnit.isShort}
<!-- 2-3 letter unit: vertical layout -->
<div class="flex flex-col items-center justify-center">
<NumberFlow value={count} class={cn("font-semibold text-lg leading-tight", hideNumber && "invisible")} />
<NumberFlow value={count} class={cn("font-semibold tabular-nums leading-tight", fontSize, hideNumber && "invisible")} />
{#if count > 0}
<span class="text-[11px] opacity-75 font-medium lowercase leading-none -mt-1">{displayUnit.text}</span>
{/if}
</div>
{:else}
<!-- No unit: just the number -->
<NumberFlow value={count} class={cn("font-semibold", hideNumber && "invisible")} />
<NumberFlow value={count} class={cn("font-semibold tabular-nums", fontSize, hideNumber && "invisible")} />
{/if}
{:else if checked}
<Check class="text-primary-foreground" />