feat(treasury): separate receipts from income and fit finance on a phone

A receipt or payment only reduces the party balance, while an income or expense keeps both amounts. Finance screens stack into cards on a phone so the forms and lists stay readable.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/treasury/TreasuryLayout.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue';
 import { RouterView, useRoute } from 'vue-router';
-import { Flex as AFlex, Typography, theme } from 'ant-design-vue';
+import { Flex as AFlex, Grid, Typography, theme } from 'ant-design-vue';
 import TreasuryNav from '@/components/treasury/TreasuryNav.vue';
 import { provideTreasuryPageChrome } from './treasuryPageChrome';
 
 const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
 const { token } = theme.useToken();
+const screens = Grid.useBreakpoint();
+const isMobile = computed(() => !screens.value.md);
 const route = useRoute();
 const chrome = provideTreasuryPageChrome();
 
@@ -31,16 +33,19 @@ const description = computed(
     (typeof route.meta.treasuryDescription === 'string' ? route.meta.treasuryDescription : ''),
 );
 
-/** Keep title+subtitle block height stable across tabs (one-line subtitle). */
-const headerStyle = computed(() => ({
-  minHeight: `${token.value.controlHeightLG + token.value.fontSizeLG + token.value.marginXXS}px`,
-}));
+const headerStyle = computed(() =>
+  isMobile.value
+    ? undefined
+    : {
+        minHeight: `${token.value.controlHeightLG + token.value.fontSizeLG + token.value.marginXXS}px`,
+      },
+);
 </script>
 
 <template>
-  <a-flex vertical :gap="token.margin" :style="{ width: '100%' }">
+  <a-flex vertical :gap="isMobile ? token.marginSM : token.margin" :style="{ width: '100%' }">
     <div :style="headerStyle">
-      <a-typography-title :level="3" :style="{ margin: 0 }">{{ title }}</a-typography-title>
+      <a-typography-title :level="isMobile ? 4 : 3" :style="{ margin: 0 }">{{ title }}</a-typography-title>
       <a-typography-text
         type="secondary"
         :ellipsis="description ? { tooltip: description } : false"