Merge pull request #497 from AOEpeople/bugfix/bugfix/#265096-tv-overflow

Bugfix/bugfix/#265096 tv overflow

.github/workflows/main.yml

@@ -336,8 +336,8 @@ jobs:
       - name: Test with docker compose
         run: |
           mkdir build
-          docker-compose -f docker-compose-test.yaml up --abort-on-container-exit
-          docker-compose -f docker-compose-test.yaml down --remove-orphans
+          docker compose -f docker-compose-test.yaml up --abort-on-container-exit
+          docker compose -f docker-compose-test.yaml down --remove-orphans
       - name: Upload coverage report artifact
         uses: actions/upload-artifact@v4
         if: always()

src/Resources/src/components/menuParticipants/AddParticipantsSearchBar.vue

@@ -65,7 +65,10 @@
               class="relative cursor-pointer px-4 py-1 text-left text-[14px] font-medium text-[#9CA3AF] hover:bg-[#FAFAFA]"
               @click="selectProfile(profile as IProfile)"
             >
-              <span class="size-full truncate">
+              <span
+                data-cy="add-part-li"
+                class="size-full truncate"
+              >
                 {{ getDisplayName(profile as IProfile) }}
               </span>
             </LazyListItem>

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="w-full shadow-[0_15px_35px_0_#5B788F21]"
       :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 break-all p-4 align-top 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 auto-cols-[1fr] grid-flow-col 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>

tests/e2e/cypress/e2e/MenuParticipations.cy.ts

@@ -32,7 +32,7 @@ describe('Test Menu Participations View', () => {
         // Test Add Search Bar
         cy.get('input').first().click().type('meals');
         cy.wait(500);
-        cy.get('li').each(($el) => {
+        cy.get('span[data-cy="add-part-li"]').each(($el) => {
             expect($el.text()).to.match(/Meals, */);
         });
         cy.get('input').clear().first().type('bob');