fixed a overflowing image bug that was caused by a not supported tag …

…in firefox 88 and fixed not truncated text

src/Resources/src/components/misc/VeggiIcon.vue

@@ -3,13 +3,15 @@
     <img
       v-if="diet === Diet.VEGETARIAN"
       class="object-cover"
+      :class="maxHeight"
       src="../../../images/vegetarian.png"
       alt="vegetarian"
       data-cy="vegetarian-icon"
     />
     <img
       v-else-if="diet === Diet.VEGAN"
       class="object-cover"
+      :class="maxHeight"
       src="../../../images/vegan.png"
       alt="vegan"
       data-cy="vegan-icon"
@@ -33,6 +35,7 @@ withDefaults(
   defineProps<{
     diet: Diet;
     tooltipActive?: boolean;
+    maxHeight?: string;
   }>(),
   {
     tooltipActive: true

src/Resources/src/components/participations/Meal.vue

@@ -1,16 +1,16 @@
 <template>
   <table
     v-if="meal && meal.title.en !== 'Combined Dish'"
-    class="grow-1 table-fixed border-collapse rounded-b-lg rounded-t-[18px] border-0 border-none bg-white"
+    class="w-full table-fixed border-collapse rounded-b-lg rounded-t-[18px] border-0 border-none bg-white"
   >
     <thead
-      class="shadow-[0_15px_35px_0_#5B788F21]"
+      class="shadow-[0_15px_35px_0_#5B788F21] w-full"
       :class="[meal.variations.length > 0 ? '' : 'rounded-b-lg']"
     >
       <tr class="w-full">
         <th
           :colspan="meal.variations.length > 0 ? meal.variations.length : 1"
-          class="flex flex-row justify-center gap-2 p-4 align-top text-lg text-primary"
+          class="grid w-full grid-flow-col justify-center gap-2 p-4 align-top break-all text-lg text-primary"
         >
           {{ languageIsEnglish ? meal.title.en : meal.title.de }}
           <VeggiIcon
@@ -19,6 +19,7 @@
             class="self-center"
             :class="meal.diet === Diet.VEGAN ? 'h-[45px]' : 'h-[42px]'"
             :tooltip-active="false"
+            :maxHeight="meal.diet === Diet.VEGAN ? 'max-h-[45px]' : 'max-h-[42px]'"
           />
         </th>
       </tr>
@@ -29,19 +30,20 @@
         :key="index"
       >
         <td
-          class="flex min-h-[60px] flex-row content-center justify-center gap-2"
+          class="grid min-h-[60px] grid-flow-col content-center justify-center gap-2 p-2"
           :class="//@ts-ignore
           [meal.variations.length - 1 > index ? 'border-b border-solid' : 'border-none']"
         >
-          <span class="my-auto">
+          <span class="my-auto break-all">
             {{ getTitleForLocale(variation) }}
           </span>
           <VeggiIcon
             v-if="variation.diet && variation.diet !== Diet.MEAT"
             :diet="variation.diet"
             class="self-center"
-            :class="variation.diet === Diet.VEGAN ? 'h-[42px]' : 'h-[35px]'"
+            :class="variation.diet === Diet.VEGAN ? 'h-[31px]' : 'h-[36px]'"
             :tooltip-active="false"
+            :maxHeight="meal.diet === Diet.VEGAN ? 'max-h-[31px] h-[31px]' : 'max-h-[36px] h-[36px]'"
           />
         </td>
       </tr>

src/Resources/src/components/participations/MealsList.vue

@@ -2,12 +2,11 @@
   <div
     id="mealsList"
     ref="mealsList"
-    class="my-6 flex h-fit flex-row gap-4 p-0"
+    class="my-6 grid h-fit grid-flow-col auto-cols-[1fr] gap-4 p-0"
   >
     <Meal
       v-for="meal in mealsWithVariations"
       :key="meal.mealId"
-      class="flex-1"
       :meal="meal"
     />
   </div>

src/Resources/src/components/participations/MealsSummary.vue

@@ -14,18 +14,19 @@
     >
       <td
         v-if="index < 3"
-        class="flex flex-row content-center justify-center gap-2 truncate"
+        class="grid grid-flow-col content-center justify-center gap-2 px-2"
         :class="[mealNameIsEmpty(String((meal as IDish).title)) ? 'h-[60px]' : 'h-[60px] border-b border-solid']"
       >
-        <span class="my-auto">
+        <span class="my-auto truncate">
           {{ String((meal as IDish).title) }}
         </span>
         <VeggiIcon
           v-if="(meal as IDish).diet && (meal as IDish).diet !== Diet.MEAT"
           :diet="(meal as IDish).diet"
           class="self-center"
-          :class="(meal as IDish).diet === Diet.VEGAN ? 'h-[42px]' : 'h-[35px]'"
+          :class="(meal as IDish).diet === Diet.VEGAN ? 'h-[31px]' : 'h-[36px]'"
           :tooltip-active="false"
+          :maxHeight="meal.diet === Diet.VEGAN ? 'max-h-[31px] h-[31px]' : 'max-h-[36px] h-[36px]'"
         />
       </td>
     </tr>