Improve mobile responsiveness for ingredients table

Co-authored-by: Matthijz98 <17087153+Matthijz98@users.noreply.github.com>

Author: Copilot

src/components/ingredients/Ingredients.svelte

@@ -6,12 +6,12 @@
 </script>
 
 <div class="bg-slate-200 rounded mb-4 overflow-x-auto">
-  <table class="w-full text-nowrap whitespace-nowrap">
+  <table class="w-full text-nowrap whitespace-nowrap text-sm md:text-base">
     <thead class="text-left">
       <tr class="border-b-2 border-slate-400">
         <th class="p-2">Ingredient</th>
-        <th class="p-2">Allergieën</th>
-        <th class="p-2">Hoeveelheid p.p.</th>
+        <th class="p-2 hidden sm:table-cell">Allergieën</th>
+        <th class="p-2">p.p.</th>
         <th class="p-2">Totaal</th>
       </tr>
     </thead>