ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust height of the tab bar

Browse Source
This commit is contained in:
Rafał
2026-05-07 18:07:56 +02:00
parent 53a7212dfe
commit 544df5175d
6 changed files with 49 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@@ -475,7 +475,7 @@
#pantry-bottom-controls, #pantry-bottom-controls,
#shopping-bottom-controls { #shopping-bottom-controls {
bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important; bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
height: var(--recipe-control-size, 3.05rem) !important; height: var(--recipe-bottom-control-size, 3.9rem) !important;
background: transparent !important; background: transparent !important;
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
@@ -500,10 +500,10 @@
#pantry-search-shell.recipe-search-field:focus-within { #pantry-search-shell.recipe-search-field:focus-within {
position: absolute !important; position: absolute !important;
left: var(--catalog-menu-left, 1rem); left: var(--catalog-menu-left, 1rem);
right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem)); right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
bottom: 0; bottom: 0;
min-width: 0; min-width: 0;
height: var(--recipe-control-size, 3.05rem); height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important; border: 1px solid rgba(255, 255, 255, 0.32) !important;
@@ -651,15 +651,15 @@
#main-view .recipe-bottom-action, #main-view .recipe-bottom-action,
#pantry-view .recipe-bottom-action, #pantry-view .recipe-bottom-action,
#shopping-view .recipe-bottom-action { #shopping-view .recipe-bottom-action {
width: var(--recipe-control-size, 3.05rem); width: var(--recipe-bottom-control-size, 3.9rem);
height: var(--recipe-control-size, 3.05rem); height: var(--recipe-bottom-control-size, 3.9rem);
border-radius: 999px; border-radius: 999px;
font-size: 0.95rem; font-size: 1rem;
} }
#main-view .recipe-bottom-action i, #main-view .recipe-bottom-action i,
#pantry-view .recipe-bottom-action i, #pantry-view .recipe-bottom-action i,
#shopping-view .recipe-bottom-action i { #shopping-view .recipe-bottom-action i {
font-size: 0.95rem; font-size: 1rem;
line-height: 1; line-height: 1;
} }
.dark #pantry-filter-popover { .dark #pantry-filter-popover {
@@ -858,8 +858,9 @@
--dock-gap: 0.06rem; --dock-gap: 0.06rem;
--dock-radius: 999px; --dock-radius: 999px;
--recipe-dock-width: var(--dock-width); --recipe-dock-width: var(--dock-width);
--recipe-collapsed-dock-width: 3.05rem; --recipe-bottom-control-size: 3.9rem;
--recipe-collapsed-dock-height: 3.05rem; --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-radius: 999px; --recipe-collapsed-dock-radius: 999px;
--recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2)); --recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
display: flex; display: flex;
@@ -958,7 +959,7 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: var(--dock-width); width: var(--dock-width);
height: var(--recipe-control-size, 3.05rem); height: var(--recipe-bottom-control-size, 3.9rem);
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch; align-items: stretch;
@@ -1020,8 +1021,8 @@
border: 0; border: 0;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
width: 1.82rem; width: 2.33rem;
height: 1.82rem; height: 2.33rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: 999px; border-radius: 999px;
@@ -1077,8 +1078,8 @@
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: min(100%, 4rem); width: min(100%, 4rem);
height: 2.46rem; height: 3.15rem;
padding: 0.24rem 0.2rem 0.22rem; padding: 0.32rem 0.22rem 0.28rem;
color: rgb(var(--text-primary-rgb)); color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important; background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 999px; border-radius: 999px;
@@ -1090,19 +1091,19 @@
display: none; display: none;
} }
#app-bottom-nav .nav-tab.is-active i { #app-bottom-nav .nav-tab.is-active i {
font-size: 0.78rem; font-size: 0.88rem;
} }
#app-bottom-nav .nav-tab.is-active::after { #app-bottom-nav .nav-tab.is-active::after {
font-size: 0.58rem; font-size: 0.66rem;
line-height: 1.1; line-height: 1.1;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active::after { #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.52rem; font-size: 0.62rem;
line-height: 1.24; line-height: 1.24;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active { #app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.54rem; height: 3.25rem;
padding: 0.22rem 0.2rem 0.28rem; padding: 0.28rem 0.2rem 0.32rem;
} }
.dark #app-bottom-nav .nav-tab.is-active { .dark #app-bottom-nav .nav-tab.is-active {
color: #fff; color: #fff;
@@ -1128,42 +1129,43 @@
--dock-pad: 0.38rem; --dock-pad: 0.38rem;
--dock-gap: 0.05rem; --dock-gap: 0.05rem;
--dock-radius: 999px; --dock-radius: 999px;
--recipe-collapsed-dock-width: 2.95rem; --recipe-bottom-control-size: 3.78rem;
--recipe-collapsed-dock-height: 2.95rem; --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
--recipe-collapsed-dock-radius: 999px; --recipe-collapsed-dock-radius: 999px;
} }
#app-bottom-nav .bottom-dock { #app-bottom-nav .bottom-dock {
width: var(--dock-width); width: var(--dock-width);
height: var(--recipe-control-size, 2.95rem); height: var(--recipe-bottom-control-size, 3.78rem);
gap: 0.01rem; gap: 0.01rem;
padding: 0.24rem; padding: 0.24rem;
border-radius: var(--dock-radius); border-radius: var(--dock-radius);
} }
#app-bottom-nav .nav-tab, #app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action { #app-bottom-nav .nav-action {
width: 1.7rem; width: 2.18rem;
height: 1.7rem; height: 2.18rem;
border-radius: 999px; border-radius: 999px;
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: min(100%, 3.72rem); width: min(100%, 3.72rem);
height: 2.25rem; height: 2.88rem;
padding: 0.2rem 0.18rem 0.18rem; padding: 0.24rem 0.18rem 0.2rem;
border-radius: 999px; border-radius: 999px;
} }
#app-bottom-nav .nav-label { #app-bottom-nav .nav-label {
font-size: 0.56rem; font-size: 0.56rem;
} }
#app-bottom-nav .nav-tab.is-active::after { #app-bottom-nav .nav-tab.is-active::after {
font-size: 0.56rem; font-size: 0.62rem;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active::after { #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.5rem; font-size: 0.58rem;
line-height: 1.24; line-height: 1.24;
} }
#app-bottom-nav.is-double-compact .nav-tab.is-active { #app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.3rem; height: 2.94rem;
padding: 0.18rem 0.18rem 0.24rem; padding: 0.22rem 0.18rem 0.24rem;
} }
#app-bottom-nav.is-compact-tab .bottom-dock { #app-bottom-nav.is-compact-tab .bottom-dock {
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px)); width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
@@ -1217,7 +1219,7 @@
</div> </div>
<script> <script>
const APP_ASSET_VERSION = '20260421-nav-labels'; const APP_ASSET_VERSION = '20260507-bottom-nav-size-tune-3';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version'; const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv'; const APP_VERSION_QUERY_KEY = 'appv';

13
js/ui/bottomNav.js
View File

@@ -70,15 +70,15 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize; const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2); const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize; const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
const expandedDockHeight = controlSize; const bottomControlSize = controlSize * 1.28;
const controlGap = 0.5 * rootFontSize; const controlGap = 0.5 * rootFontSize;
const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2); const controlsLift = 0;
const collapsedDockWidth = controlSize; const collapsedDockWidth = bottomControlSize;
const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight); const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
const controlCluster = controlSize + controlGap; const controlCluster = bottomControlSize + controlGap;
const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster; const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
const filterLeft = dockLeft + dockWidth - controlSize; const filterLeft = dockLeft + dockWidth - bottomControlSize;
const searchButtonLeft = filterLeft - controlGap - controlSize; const searchButtonLeft = filterLeft - controlGap - bottomControlSize;
const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap); const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`); nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
@@ -93,6 +93,7 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`); document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`);
document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`); document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`); document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
document.documentElement.style.setProperty('--recipe-bottom-control-size', `${bottomControlSize}px`);
document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`); document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
}; };

2
js/views/MealPlanner.js
View File

@@ -83,7 +83,7 @@ export function getMealPlannerHTML() {
${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })} ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
</div> </div>
<div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]"> <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-32 bg-[rgb(var(--app-bg-rgb))]">
<div id="planner-summary-card" class="mb-3"> <div id="planner-summary-card" class="mb-3">
<div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;"> <div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p> <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>

6
js/views/Pantry.js
View File

@@ -208,12 +208,12 @@ export function getPantryHTML() {
</div> </div>
<!-- ── scrollable content ── --> <!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);"> <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);">
<div id="pantry-board"></div> <div id="pantry-board"></div>
</div> </div>
<!-- ── floating bottom controls (search + filter) ── --> <!-- ── floating bottom controls (search + filter) ── -->
<div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-control-size, 3.05rem) + 0.75rem); opacity:0;"> <div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.75rem); opacity:0;">
<div class="flex items-center justify-between gap-3 px-0.5 pb-2"> <div class="flex items-center justify-between gap-3 px-0.5 pb-2">
<p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p> <p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
<button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));"> <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
@@ -223,7 +223,7 @@ export function getPantryHTML() {
<div id="pantry-filter-panel-body" class="space-y-4"></div> <div id="pantry-filter-panel-body" class="space-y-4"></div>
</div> </div>
<div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;"> <div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0"> <div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
<button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni"> <button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>

4
js/views/RecipeList.js
View File

@@ -125,12 +125,12 @@ export function getRecipeListHTML() {
scrollId: 'recipe-scroll', scrollId: 'recipe-scroll',
gridId: 'recipe-grid', gridId: 'recipe-grid',
emptyStateId: 'recipe-empty-state', emptyStateId: 'recipe-empty-state',
scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[rgb(var(--app-bg-rgb))]', scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]', gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
emptyTitle: 'Brak wyników', emptyTitle: 'Brak wyników',
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry', emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
})} })}
<div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;"> <div id="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0"> <div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
<button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów"> <button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>

6
js/views/ShoppingList.js
View File

@@ -139,12 +139,12 @@ export function getShoppingListHTML() {
</div> </div>
<!-- ── scrollable list ── --> <!-- ── scrollable list ── -->
<div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);"> <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);">
<div id="sl-board"></div> <div id="sl-board"></div>
</div> </div>
<div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;"> <div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
<div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-control-size, 3.05rem));"> <div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-bottom-control-size, 3.9rem));">
<button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione"> <button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
<span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span> <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>