Fix budget selection for expenses

Also open the new expense modal by default on load for mobile viewport sizes.

components/expenses/MainExpenses.tsx

@@ -1,5 +1,5 @@
 import { useSignal } from '@preact/signals';
-import { useEffect } from 'preact/hooks';
+import { useCallback, useEffect } from 'preact/hooks';
 
 import { Budget, Expense, SupportedCurrencySymbol } from '/lib/types.ts';
 import {
@@ -615,6 +615,13 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
     }, 500);
   }
 
+  // Open the expense modal if the window is small
+  const handleWindowResize = useCallback(() => {
+    if (globalThis.innerWidth < 600 && !isExpenseModalOpen.value && !editingExpense.value) {
+      isExpenseModalOpen.value = true;
+    }
+  }, []);
+
   useEffect(() => {
     return () => {
       if (searchTimeout.value) {
@@ -623,6 +630,15 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
     };
   }, []);
 
+  useEffect(() => {
+    handleWindowResize();
+    globalThis.addEventListener('resize', handleWindowResize);
+
+    return () => {
+      globalThis.removeEventListener('resize', handleWindowResize);
+    };
+  }, [handleWindowResize]);
+
   return (
     <>
       <section class='block md:flex flex-row items-center justify-between mb-4'>