From 99b9388f61a1627ba1f5f01ee22dce2bb2ed7aae Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Fri, 26 Jun 2026 11:06:56 +0200
Subject: [PATCH] feat(libra): inline the "Other" account hint with the
 instruction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Put the amber hint on the same line as "Select the account…" instead
of stacking it underneath, wrapping gracefully on narrow widths.
---
 src/accounting-app/views/AddIncome.vue         | 12 ++++++------
 src/modules/expenses/components/AddExpense.vue | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/accounting-app/views/AddIncome.vue b/src/accounting-app/views/AddIncome.vue
index abb71b9..e4b5954 100644
--- a/src/accounting-app/views/AddIncome.vue
+++ b/src/accounting-app/views/AddIncome.vue
@@ -78,12 +78,12 @@
 
           <!-- Step 1: Revenue Account Selection -->
           <div v-if="currentStep === 1">
-            <p class="text-sm text-muted-foreground mb-1">
-              {{ t('libra.income.selectAccount') }}
-            </p>
-            <p class="flex items-center gap-1.5 mb-4 text-sm font-medium text-amber-600 dark:text-amber-400">
-              <AlertTriangle class="h-4 w-4 shrink-0" />
-              {{ t('libra.income.otherAccountHint') }}
+            <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 mb-4 text-sm">
+              <span class="text-muted-foreground">{{ t('libra.income.selectAccount') }}</span>
+              <span class="inline-flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400">
+                <AlertTriangle class="h-4 w-4 shrink-0" />
+                {{ t('libra.income.otherAccountHint') }}
+              </span>
             </p>
             <AccountSelector
               v-model="selectedRevenueAccount"
diff --git a/src/modules/expenses/components/AddExpense.vue b/src/modules/expenses/components/AddExpense.vue
index 2eb1f2a..c591a0c 100644
--- a/src/modules/expenses/components/AddExpense.vue
+++ b/src/modules/expenses/components/AddExpense.vue
@@ -84,12 +84,12 @@
 
       <!-- Step 1: Account Selection -->
       <div v-if="currentStep === 1">
-        <p class="text-sm text-muted-foreground mb-1">
-          Select the account for this expense.
-        </p>
-        <p class="flex items-center gap-1.5 mb-4 text-sm font-medium text-amber-600 dark:text-amber-400">
-          <AlertTriangle class="h-4 w-4 shrink-0" />
-          Use the "Other" account if you're not sure.
+        <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 mb-4 text-sm">
+          <span class="text-muted-foreground">Select the account for this expense.</span>
+          <span class="inline-flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400">
+            <AlertTriangle class="h-4 w-4 shrink-0" />
+            Use the "Other" account if you're not sure.
+          </span>
         </p>
         <AccountSelector
           v-model="selectedAccount"