admin courses: provide width hint in col group for contents column, fixes #3078

Closes #3078

Merge request studip/studip!3248

resources/vue/components/AdminCourses.vue

@@ -12,6 +12,14 @@
                     {{ coursesCount + ' ' + $gettext('Veranstaltungen') }}
                 </span>
             </caption>
+            <colgroup>
+                <col v-if="showComplete">
+                <col v-for="activeField in sortedActivatedFields"
+                     :key="`col-${activeField}`"
+                     :style="{width: activeField === 'contents' && contentWidth !== null ? `${contentWidth}px` : null}"
+                >
+                <col>
+            </colgroup>
             <thead>
                 <tr class="sortable">
                     <th v-if="showComplete" :class="sort.by === 'completion' ? 'sort' + sort.direction.toLowerCase() : ''">
@@ -129,6 +137,7 @@ export default {
             },
             currentLine: null,
             open_children: [],
+            contentWidth: null,
         };
     },
     created() {
@@ -138,6 +147,20 @@ export default {
         this.globalOn('AdminCourses/changeFilter', this.changeFilter.bind(this));
         this.globalOn('AdminCourses/loadCourse', this.loadCourse.bind(this));
     },
+    updated() {
+        const iconNavigations = this.$el.querySelectorAll('tbody .my-courses-navigation');
+
+        if (iconNavigations.length === 0) {
+            this.contentWidth = null;
+            return;
+        }
+
+        const iconCounts = Array.from(iconNavigations).map(node => {
+            return node.querySelectorAll('.my-courses-navigation-item').length;
+        });
+
+        this.contentWidth = Math.max(...iconCounts) * 26;
+    },
     destroyed() {
         this.globalOff('AdminCourses/changeActionArea', this.changeActionArea.bind(this));
         this.globalOff('AdminCourses/changeFilter', this.changeFilter.bind(this));