Improved mobile layout

lib/pages/transactions/widgets/transactions_actions.dart

@@ -7,31 +7,64 @@ import 'package:tunas/pages/transactions/widgets/transaction_add_dialog.dart';
 class TransactionsActions extends StatelessWidget {
   const TransactionsActions({super.key});
 
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<TransactionBloc, TransactionState>(
-      builder: (context, state) => Container(
-        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
-        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
-        child: Row(
+  Widget _smallScreenLayout(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            const Text(
+            const Text (
               'Transactions',
               style: TextStyle(
                 fontWeight: FontWeight.w900,
                 fontSize: 35,
               ),
             ),
-            CategoryFilter(),
-            IconButton(
+            FilledButton.icon(
               onPressed: () => TransactionAddDialog.show(context, null),
+              label: const Text('Add transaction'),
               icon: const Icon(
                 Icons.add
               )
             ),
           ],
-        )
+        ),
+        const CategoryFilter(),
+      ],
+    );
+  }
+
+  Widget _largeScreenLayout(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        const Text(
+          'Transactions',
+          style: TextStyle(
+            fontWeight: FontWeight.w900,
+            fontSize: 35,
+          ),
+        ),
+        const CategoryFilter(),
+        IconButton(
+          onPressed: () => TransactionAddDialog.show(context, null),
+          icon: const Icon(
+            Icons.add
+          )
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
+    return BlocBuilder<TransactionBloc, TransactionState>(
+      builder: (context, state) => Container(
+        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
+        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
+        child: smallVerticalScreen ? _smallScreenLayout(context) : _largeScreenLayout(context),
       )
     );
   }