From 18149eef8b222ffdfb0074c92066d4fb2a7770b6 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 1 Mar 2022 08:33:01 +0000
Subject: [PATCH] Hide Leftover on small screens

---
 web/src/pages/Budgeting.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 3ffb2c1..b1d05ac 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -82,20 +82,16 @@ function getGroupState(group : {Name : string, Expand: boolean}) : boolean {
     <table class="container col-lg-12" id="content">
         <tr>
             <th>Category</th>
-            <th></th>
-            <th></th>
-            <th>Leftover</th>
+            <th class="hidden md:block">Leftover</th>
             <th>Assigned</th>
             <th>Activity</th>
             <th>Available</th>
         </tr>
         <tbody v-for="group in GroupsForMonth">
-            <a class="text-lg font-bold" @click="toggleGroup(group)">{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
+            <tr><td><a class="text-lg font-bold" colspan="4" @click="toggleGroup(group)">{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a></td></tr>
             <tr v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
                 <td>{{ category.Name }}</td>
-                <td></td>
-                <td></td>
-                <td class="text-right">
+                <td class="text-right hidden md:block">
                     <Currency :value="category.AvailableLastMonth" />
                 </td>
                 <td class="text-right">