improve mobile layout, refs #333

src/app/events/components/grade/grade.component.html

@@ -1,6 +1,9 @@
 <div class="d-flex flex-column w-100">
   <div class="d-flex flex-row" [class.is-invalid]="pointsInput.errors">
-    <div *ngIf="grade.test.IsPointGrading" class="point-input-container mr-3">
+    <div
+      *ngIf="grade.test.IsPointGrading"
+      class="point-input-container mr-2 mr-md-3"
+    >
       <input
         #pointInput
         class="form-control"

src/app/events/components/grade/grade.component.scss

@@ -1,7 +1,16 @@
+@import "../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
+
 .point-input-container {
-  width: 5em;
+  width: 4em;
 }
 
 :host ::ng-deep select {
   min-width: 13ch;
 }
+
+@include media-breakpoint-up(sm) {
+  .point-input-container {
+    width: 5em;
+  }
+}

src/app/events/components/grades/average-grades/average-grades.component.scss

@@ -0,0 +1,12 @@
+@import "../../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
+
+.average-points {
+  min-width: 4em;
+}
+
+@include media-breakpoint-up(sm) {
+  .average-points {
+    min-width: 5em;
+  }
+}

src/app/events/components/grades/average-grades/average-grades.component.ts

@@ -7,13 +7,13 @@ import { Test } from 'src/app/shared/models/test.model';
   template: `<div class="d-flex flex-row w-100">
     <span
       *ngIf="test.IsPointGrading"
-      class="mr-3 average-points"
+      class="mr-2 mr-md-3 average-points"
       data-testid="average-points"
       >{{ calculatePointsAverage(test) }}</span
     >
     <span data-testid="average-grade">{{ calculateGradeAverage(test) }}</span>
   </div>`,
-  styles: ['.average-points {min-width: 9ch;}'],
+  styleUrls: ['./average-grades.component.scss'],
 })
 export class AverageGradesComponent {
   @Input() test: Test;

src/app/events/components/test-edit-grades/test-edit-grades.component.html

@@ -141,11 +141,9 @@
             trackBy: trackStudentGrade
           "
         >
-          <td class="primary-column-width sticky">
+          <td class="primary-column-width sticky name">
             <a [routerLink]="['student', studentGrade.student.Id, 'grades']">
-              <span class="text-body text-truncate">{{
-                studentGrade.student.FullName
-              }}</span>
+              <span class="text-body">{{ studentGrade.student.FullName }}</span>
               <span class="mobile mean">
                 {{ 'tests.mean' | translate }}:
                 {{ studentGrade.finalGrade.average | number: '1.0-3' }}

src/app/events/components/test-edit-grades/test-edit-grades.component.scss

@@ -51,6 +51,15 @@ table th {
   padding: $spacer;
 }
 
+table td.name,
+table td.average {
+  max-width: 18ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 0;
+}
+
 .point-input-container {
   width: 5em;
 }
@@ -80,6 +89,11 @@ table th {
     display: table-cell !important;
   }
 
+  table td.name {
+    max-width: auto;
+    overflow: visible;
+  }
+
   thead tr th {
     border-top: none;
     padding-top: calc($spacer / 4);