Change grid layout to table

Author: Dominik Grenz

personalization-webcomponents/src/components/ChecklistHeader.vue

@@ -1,49 +1,48 @@
 <template>
   <muc-intro
-    tagline="Checkliste"
-    :title="checklist.title"
-    :img="getChecklistIconByTitle(checklist.title)"
-    imgAlt=""
+      tagline="Checkliste"
+      :title="checklist.title"
+      :img="getChecklistIconByTitle(checklist.title)"
+      imgAlt=""
   >
-    <p style="padding-bottom: 16px">
-      <b>Erstellungsdatum: </b
-      >{{ props.checklist.lastUpdated.toLocaleString().split(",")[0] }}
-    </p>
-    <div class="taskcontainer">
-      <div class="task">Aufgaben:</div>
-      <div class="chip">
-        <muc-chip
-          v-if="todoCount"
-          style="margin-right: 8px"
-          background-color="#FDD1AC"
-        >
-          {{ todoCount }} offen
-          <svg
-            style="margin-left: 8px; width: 20px; height: 20px"
-            aria-hidden="true"
-            class="m-button__icon"
-          >
-            <use href="#icon-pencil" />
-          </svg>
-        </muc-chip>
-      </div>
-
-      <div class="chip">
-        <muc-chip
-          v-if="doneCount"
-          background-color="#B7D2B7"
-        >
-          {{ doneCount }} erledigt
-          <svg
-            style="margin-left: 8px; width: 20px; height: 20px"
-            aria-hidden="true"
-            class="m-button__icon"
-          >
-            <use href="#icon-check" />
-          </svg>
-        </muc-chip>
-      </div>
+    <div style="padding-bottom: 16px; padding-left: 3px">
+      <b>Erstellungsdatum: </b>{{ props.checklist.lastUpdated.toLocaleString().split(",")[0] }}
     </div>
+    <table>
+      <tr>
+        <td class="task">Aufgaben:</td>
+        <td>
+          <div class="chips-container">
+            <muc-chip
+                v-if="todoCount"
+                background-color="#FDD1AC"
+            >
+              {{ todoCount }} offen
+              <svg
+                  style="margin-left: 8px; width: 20px; height: 20px"
+                  aria-hidden="true"
+                  class="m-button__icon"
+              >
+                <use href="#icon-pencil" />
+              </svg>
+            </muc-chip>
+            <muc-chip
+                v-if="doneCount"
+                background-color="#B7D2B7"
+            >
+              {{ doneCount }} erledigt
+              <svg
+                  style="margin-left: 8px; width: 20px; height: 20px"
+                  aria-hidden="true"
+                  class="m-button__icon"
+              >
+                <use href="#icon-check" />
+              </svg>
+            </muc-chip>
+          </div>
+        </td>
+      </tr>
+    </table>
   </muc-intro>
 </template>
 
@@ -99,21 +98,25 @@ const doneCount = computed(() => {
   margin-bottom: 8px !important;
 }
 
-.taskcontainer {
-  display: grid;
-  grid-template-columns: 100px 100px 100px;
-  gap: 8px;
-}
-
 .task {
-  padding-top: 3px;
-  text-align: left;
   font-weight: bold;
+  vertical-align: baseline;
+  padding-right: 8px;
+  white-space: nowrap;
+}
+
+.chips-container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
 }
 
 @media (max-width: 450px) {
-  .chip:nth-child(3) {
-    grid-column: 2;
+  .chips-container {
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 8px;
   }
 }
-</style>
+
+</style>