Rearrange quick entry metadata

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() {
           <strong class="amount-value">{{ displayAmount }}</strong>
         </div>
         <span v-if="hasCalculation" class="calculation-line">{{ calculationLabel }}</span>
-        <button class="quick-ledger-target" type="button" @click="openLedgerPicker">
-          <BookOpen :size="13" />
-          <span>记入 {{ selectedLedgerLabel }}</span>
-          <ChevronDown :size="13" />
-        </button>
       </div>
-      <button class="header-date-button" :class="{ invalid: !occurredAtValid }" type="button" :aria-invalid="!occurredAtValid" @click="openDatePicker">
+      <button class="quick-ledger-target" type="button" @click="openLedgerPicker">
-        <CalendarDays :size="16" />
+        <BookOpen :size="14" />
-        <span>{{ dateLabel }}</span>
+        <span>记入 {{ selectedLedgerLabel }}</span>
+        <ChevronDown :size="13" />
       </button>
-      <input
-        ref="dateInput"
-        v-model="occurredAt"
-        class="native-date-input"
-        type="datetime-local"
-        aria-label="发生时间"
-        tabindex="-1"
-      />
     </header>
 
     <div class="entry-meta-row">
@@ -409,6 +398,19 @@ function saveEntry() {
         />
       </label>
 
+      <button class="header-date-button" :class="{ invalid: !occurredAtValid }" type="button" :aria-invalid="!occurredAtValid" @click="openDatePicker">
+        <CalendarDays :size="15" />
+        <span>{{ dateLabel }}</span>
+      </button>
+      <input
+        ref="dateInput"
+        v-model="occurredAt"
+        class="native-date-input"
+        type="datetime-local"
+        aria-label="发生时间"
+        tabindex="-1"
+      />
+
       <div class="category-selector-anchor" :class="{ 'selector-open': selectorOpen }">
         <button
           type="button"
@@ -420,7 +422,7 @@ function saveEntry() {
         >
           <Check v-if="selectorOpen" :size="22" />
           <component v-else :is="selectedCategory?.icon ?? typeOption.icon" :size="17" />
-          <span>{{ selectorOpen ? "确定" : categoryPathLabel }}</span>
+          <span>{{ selectorOpen ? "确定" : categoryDisplayLabel }}</span>
         </button>
 
         <Transition name="coordinate-selector">

apps/web/src/styles.css

@@ -660,14 +660,14 @@ input:focus-visible {
 .quick-ledger-target {
   position: relative;
   width: max-content;
-  max-width: 190px;
+  max-width: min(190px, 48vw);
-  min-height: 23px;
+  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;
+    grid-template-columns: minmax(54px, 1fr) auto auto;
-    gap: 6px;
+    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;
   }