diff --git a/apps/web/src/components/QuickEntryDrawer.vue b/apps/web/src/components/QuickEntryDrawer.vue index d92234d..d7fba4e 100644 --- a/apps/web/src/components/QuickEntryDrawer.vue +++ b/apps/web/src/components/QuickEntryDrawer.vue @@ -59,6 +59,7 @@ const selectedParent = computed(() => categoryPath.value[0]); const categoryPathLabel = computed(() => [typeOption.value.label, ...categoryPath.value.map((category) => category.label)].join(">"), ); +const categoryDisplayLabel = computed(() => selectedCategory.value?.label ?? typeOption.value.label); const calculatedAmount = computed(() => evaluateExpression(expression.value)); const hasCalculation = computed(() => /[+-]/.test(expression.value)); const calculationLabel = computed(() => expression.value.replaceAll("-", "−").replaceAll("+", " + ").replaceAll("−", " − ")); @@ -377,24 +378,12 @@ function saveEntry() { {{ displayAmount }} {{ calculationLabel }} - - -
@@ -409,6 +398,19 @@ function saveEntry() { /> + + +
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index 339c4be..54fe51d 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -660,14 +660,14 @@ input:focus-visible { .quick-ledger-target { position: relative; width: max-content; - max-width: 190px; - min-height: 23px; + max-width: min(190px, 48vw); + min-height: 34px; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; border-radius: 6px; - padding: 2px 5px; + padding: 0 8px; background: #eaf6f3; color: #087f72; font-size: 11px; @@ -737,7 +737,7 @@ input:focus-visible { .entry-meta-row { height: 56px; display: grid; - grid-template-columns: minmax(90px, 1fr) auto; + grid-template-columns: minmax(64px, 1fr) auto auto; align-items: center; gap: 8px; border-top: 1px solid #e4ece9; @@ -855,7 +855,7 @@ input:focus-visible { .meta-category-button { position: relative; z-index: 3; - max-width: min(190px, 48vw); + max-width: 120px; min-height: 32px; display: inline-flex; align-items: center; @@ -1380,17 +1380,22 @@ input:focus-visible { } .entry-meta-row { - grid-template-columns: minmax(76px, 1fr) auto; - gap: 6px; + grid-template-columns: minmax(54px, 1fr) auto auto; + gap: 5px; padding-right: 12px; padding-left: 12px; } .meta-category-button { - max-width: 48vw; + max-width: 92px; } .header-date-button { + padding: 0 6px; + } + + .quick-ledger-target { + max-width: 46vw; padding: 0 7px; }