diff --git a/src/app/events/components/grades/grade-select/grade-select.component.html b/src/app/events/components/grades/grade-select/grade-select.component.html
index 98c25d15..4a5b02f3 100644
--- a/src/app/events/components/grades/grade-select/grade-select.component.html
+++ b/src/app/events/components/grades/grade-select/grade-select.component.html
@@ -3,6 +3,7 @@
   [allowEmpty]="true"
   [value]="valueId"
   [disabled]="disabled"
+  [width]="width"
   (valueChange)="onGradeChange($event)"
   data-testid="grade-select"
 >
diff --git a/src/app/events/components/grades/grade-select/grade-select.component.scss b/src/app/events/components/grades/grade-select/grade-select.component.scss
index c69e4d56..e69de29b 100644
--- a/src/app/events/components/grades/grade-select/grade-select.component.scss
+++ b/src/app/events/components/grades/grade-select/grade-select.component.scss
@@ -1,3 +0,0 @@
-:host ::ng-deep select {
-  min-width: 13ch;
-}
diff --git a/src/app/events/components/grades/grade-select/grade-select.component.ts b/src/app/events/components/grades/grade-select/grade-select.component.ts
index c153f66f..29543623 100644
--- a/src/app/events/components/grades/grade-select/grade-select.component.ts
+++ b/src/app/events/components/grades/grade-select/grade-select.component.ts
@@ -14,6 +14,7 @@ export class GradeSelectComponent {
   @Input() valueId: Option<number>; // the selected key from the options list
   @Input() gradeId: Option<number>; // the id of the grade itself
   @Input() disabled: boolean = false;
+  @Input() width: string = "5em";
 
   @Output() gradeIdSelected = new EventEmitter<{
     id: number;
diff --git a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html
index 5f6108e5..a21e1663 100644
--- a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html
+++ b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html
@@ -15,7 +15,7 @@
     <th
       *ngFor="let test of data.tests"
       container="body"
-      class="grade test-info-desktop"
+      class="test-grade grade test-info-desktop"
       [ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
     >
       <bkd-test-table-header
@@ -29,7 +29,7 @@
     <th
       *ngFor="let test of data.tests"
       container="body"
-      class="grade header-mobile test-info-mobile"
+      class="test-grade header-mobile test-info-mobile"
       colspan="3"
       [ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
     >
@@ -43,7 +43,7 @@
     </th>
   </tr>
   <tr>
-    <th class="primary-column-width sticky" (click)="state.sortBy('FullName')">
+    <th class="sticky student-name" (click)="state.sortBy('FullName')">
       <div class="d-flex">
         <div class="column-title">
           {{ "tests.student.name" | translate }}
@@ -54,7 +54,7 @@
       </div>
     </th>
     <th
-      class="secondary-column-width sticky sticky-col-2 desktop"
+      class="sticky student-grade desktop"
       (click)="state.sortBy('FinalGrade')"
       [ngClass]="{ selected: selectedTest === undefined }"
     >
@@ -68,7 +68,7 @@
       </div>
     </th>
     <th
-      class="secondary-column-width border-end sticky sticky-col-3 desktop"
+      class="border-end sticky student-average desktop"
       (click)="state.sortBy('TestsMean')"
     >
       <div class="d-flex">
@@ -83,7 +83,7 @@
     <th
       *ngFor="let test of data.tests"
       container="body"
-      class="grade"
+      class="test-grade"
       [ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
     >
       <div class="d-flex">
diff --git a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.scss b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.scss
index e650a405..3383d413 100644
--- a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.scss
+++ b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.scss
@@ -10,7 +10,7 @@
   display: none;
 }
 
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   :host.sticky.shown {
     display: table-header-group;
   }
@@ -34,7 +34,7 @@ tr th.test-info-desktop {
   width: 5em;
 }
 
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   tr th.test-info-mobile {
     display: none !important;
   }
@@ -48,27 +48,6 @@ tr th.test-info-desktop {
     padding-top: calc($spacer / 4);
     padding-bottom: calc($spacer / 4);
     border-top: initial;
-    min-width: 100px;
-    max-width: 100px;
-  }
-
-  tr th.grade {
-    min-width: 300px;
-    max-width: 300px;
-  }
-
-  th.sticky {
-    position: sticky;
-    left: 0;
-    background-color: $white;
-  }
-
-  th.sticky.sticky-col-2 {
-    left: 300px;
-  }
-
-  th.sticky.sticky-col-3 {
-    left: 447px;
   }
 
   // FIREFOX HACK: Sadly, the sticky cells inside the fixed positioned sticky
@@ -77,7 +56,7 @@ tr th.test-info-desktop {
   // `fixed` and give them a fixed height via JavaScript (see
   // TestEditGradesHeaderStickyDirective).
   :host.sticky {
-    margin-left: 547px;
+    margin-left: var(--test-columns-offset);
 
     th.sticky {
       position: fixed;
diff --git a/src/app/events/components/test-edit-grades/test-edit-grades-common.scss b/src/app/events/components/test-edit-grades/test-edit-grades-common.scss
index f4fdc707..ac83e585 100644
--- a/src/app/events/components/test-edit-grades/test-edit-grades-common.scss
+++ b/src/app/events/components/test-edit-grades/test-edit-grades-common.scss
@@ -4,13 +4,36 @@
  * Common table styles for the TestEditGradesComponent & the TestEditGradesHeaderComponent
  */
 
-th.grade.selected,
-td.grade.selected {
+:host {
+  --student-name-column-width: 225px;
+  --student-grade-column-width: 112px;
+  --student-average-column-width: 100px;
+  --test-grade-column-width: 300px;
+
+  --student-grade-column-offset: var(--student-name-column-width);
+  --student-average-column-offset: calc(
+    var(--student-grade-column-offset) + var(--student-grade-column-width)
+  );
+  --test-columns-offset: calc(
+    var(--student-average-column-offset) + var(--student-average-column-width)
+  );
+}
+
+@media (min-width: 1000px) {
+  :host {
+    --student-name-column-width: 275px;
+  }
+}
+
+.student-grade.selected,
+.student-average.selected,
+.test-grade.selected {
   display: table-cell !important;
 }
 
-th.grade,
-td.grade,
+.student-grade,
+.student-average,
+.test-grade,
 .desktop {
   display: none !important;
 }
@@ -28,9 +51,15 @@ td {
   padding: $spacer;
 }
 
-@include media-breakpoint-up(sm) {
-  th.grade,
-  td.grade,
+.student-name {
+  // Make sure the student name is going to ellipse also on mobile
+  max-width: var(--student-name-column-width);
+}
+
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
+  .student-grade,
+  .student-average,
+  .test-grade,
   .desktop {
     display: table-cell !important;
   }
@@ -39,18 +68,43 @@ td {
     display: none !important;
   }
 
-  .primary-column-width {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 300px;
-    min-width: 300px;
-    max-width: 300px;
+  .student-name {
+    width: var(--student-name-column-width);
+    min-width: var(--student-name-column-width);
+    max-width: var(--student-name-column-width);
+  }
+
+  .student-grade {
+    width: var(--student-grade-column-width);
+    min-width: var(--student-grade-column-width);
+    max-width: var(--student-grade-column-width);
+  }
+
+  .student-average {
+    width: var(--student-average-column-width);
+    min-width: var(--student-average-column-width);
+    max-width: var(--student-average-column-width);
+  }
+
+  .test-grade {
+    min-width: var(--test-grade-column-width);
+    max-width: var(--test-grade-column-width);
+  }
+
+  th.sticky,
+  td.sticky {
+    position: sticky;
+    left: 0;
+    background-color: $white;
+  }
+
+  th.sticky.student-grade,
+  td.sticky.student-grade {
+    left: var(--student-grade-column-offset);
   }
 
-  .secondary-column-width {
-    width: 100px;
-    min-width: 100px;
-    max-width: 100px;
+  th.sticky.student-average,
+  td.sticky.student-average {
+    left: var(--student-average-column-offset);
   }
 }
diff --git a/src/app/events/components/test-edit-grades/test-edit-grades.component.html b/src/app/events/components/test-edit-grades/test-edit-grades.component.html
index f2cd1148..bcc4a768 100644
--- a/src/app/events/components/test-edit-grades/test-edit-grades.component.html
+++ b/src/app/events/components/test-edit-grades/test-edit-grades.component.html
@@ -35,7 +35,7 @@
             trackBy: trackStudentGrade
           "
         >
-          <td class="primary-column-width sticky name">
+          <td class="sticky student-name">
             <a [routerLink]="['student', studentGrade.student.Id, 'grades']">
               <span>{{ studentGrade.student.FullName }}</span>
               <span class="mobile mean">
@@ -45,7 +45,7 @@
             </a>
           </td>
           <td
-            class="grade sticky sticky-col-2"
+            class="sticky student-grade"
             [ngClass]="{ selected: selectedTest === undefined }"
           >
             <bkd-grade-select
@@ -69,7 +69,7 @@
               {{ studentGrade.finalGrade.freeHandGrade }}
             </div>
           </td>
-          <td class="grade border-end sticky sticky-col-3">
+          <td class="border-end sticky student-average">
             {{ studentGrade.finalGrade?.average | decimalOrDash: "1-3" }}
           </td>
           <td
@@ -78,7 +78,7 @@
               let gradeIndex = index;
               trackBy: trackGradeOf(studentGrade.student)
             "
-            class="grade"
+            class="test-grade"
             [ngClass]="
               selectedTest !== undefined && grade.test.Id === selectedTest.Id
                 ? 'selected'
@@ -95,7 +95,7 @@
         </tr>
         <!-- course and test averages -->
         <tr>
-          <td class="sticky">
+          <td class="sticky student-name">
             <div class="d-flex flex-column">
               <div>{{ "tests.average" | translate }}</div>
               <div class="mobile mean">
@@ -109,21 +109,21 @@
             </div>
           </td>
           <td
-            class="desktop sticky sticky-col-2"
+            class="desktop sticky student-grade"
             [ngClass]="{ selected: selectedTest === undefined }"
           >
             {{
               state.meanOfFinalGradesForCourse$ | async | decimalOrDash: "1-3"
             }}
           </td>
-          <td class="desktop border-end sticky sticky-col-3">
+          <td class="desktop border-end sticky student-average">
             {{
               state.meanOfStudentGradesForCourse$ | async | decimalOrDash: "1-3"
             }}
           </td>
           <td
             *ngFor="let test of data.tests"
-            class="grade"
+            class="test-grade"
             [ngClass]="
               test.Id === selectedTest?.Id || test.Id === selectedTest?.Id
                 ? 'selected'
diff --git a/src/app/events/components/test-edit-grades/test-edit-grades.component.scss b/src/app/events/components/test-edit-grades/test-edit-grades.component.scss
index b1e42082..fdf6f0de 100644
--- a/src/app/events/components/test-edit-grades/test-edit-grades.component.scss
+++ b/src/app/events/components/test-edit-grades/test-edit-grades.component.scss
@@ -10,7 +10,12 @@ $mean-font-size: $font-size-sm;
   line-height: 1;
 }
 
-td.name {
+tbody td.student-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 0;
+
   a {
     text-decoration: none;
   }
@@ -24,15 +29,7 @@ td.name {
   }
 }
 
-tbody td.name,
-tbody td.average {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 0;
-}
-
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   .table-responsive-wrapper {
     display: block;
     overflow-x: auto;
@@ -43,27 +40,13 @@ tbody td.average {
     border-spacing: 0;
   }
 
-  tbody td.sticky {
-    position: sticky;
-    left: 0;
-    background-color: $white;
-  }
-
-  tbody td.sticky.sticky-col-2 {
-    left: 300px;
-  }
-
-  tbody td.sticky.sticky-col-3 {
-    left: 447px;
-  }
-
   .action-buttons {
     position: sticky;
     left: 0;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (max-width: $bkd-tests-mobile-breakpoint) {
   .apply-average-button:not(.visible-on-mobile) {
     display: none !important;
   }
diff --git a/src/app/events/components/test-table-header/test-table-header.component.scss b/src/app/events/components/test-table-header/test-table-header.component.scss
index 22a91fb4..49e03230 100644
--- a/src/app/events/components/test-table-header/test-table-header.component.scss
+++ b/src/app/events/components/test-table-header/test-table-header.component.scss
@@ -40,7 +40,7 @@
   text-decoration: none;
 }
 
-@media (min-width: 750px) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   .test-designation {
     display: inherit !important;
   }
diff --git a/src/app/events/components/tests-list/tests-list.component.scss b/src/app/events/components/tests-list/tests-list.component.scss
index 29deb9bb..60be8665 100644
--- a/src/app/events/components/tests-list/tests-list.component.scss
+++ b/src/app/events/components/tests-list/tests-list.component.scss
@@ -6,7 +6,7 @@
   padding: $spacer 0;
 }
 
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   .tests-dropdown {
     display: none;
   }
@@ -23,7 +23,7 @@ a.rating-overview {
     text-decoration-color: $accent;
   }
 
-  @include media-breakpoint-down(sm) {
+  @media (max-width: $bkd-tests-mobile-breakpoint) {
     &:not(.visible-on-mobile) {
       display: none !important;
     }
diff --git a/src/app/shared/components/select/select.component.html b/src/app/shared/components/select/select.component.html
index be71793e..e0032193 100644
--- a/src/app/shared/components/select/select.component.html
+++ b/src/app/shared/components/select/select.component.html
@@ -1,6 +1,7 @@
 <select
   class="form-select"
   tabindex="{{ tabindex }}"
+  [ngStyle]="{ width }"
   [disabled]="disabled"
   [ngModel]="value$ | async"
   (ngModelChange)="valueChange.emit($event && $event.Key)"
diff --git a/src/app/shared/components/select/select.component.ts b/src/app/shared/components/select/select.component.ts
index 164b05a7..270b48e3 100644
--- a/src/app/shared/components/select/select.component.ts
+++ b/src/app/shared/components/select/select.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgFor, NgIf } from "@angular/common";
+import { AsyncPipe, NgFor, NgIf, NgStyle } from "@angular/common";
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,7 +20,7 @@ import { DropDownItem } from "../../models/drop-down-item.model";
   styleUrls: ["./select.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [FormsModule, NgIf, NgFor, AsyncPipe, TranslateModule],
+  imports: [FormsModule, NgIf, NgFor, AsyncPipe, NgStyle, TranslateModule],
 })
 export class SelectComponent implements OnChanges {
   @Input() options: ReadonlyArray<DropDownItem> = [];
@@ -29,6 +29,8 @@ export class SelectComponent implements OnChanges {
   @Input() value: Option<number> = null;
   @Input() disabled: boolean = false;
   @Input() tabindex: number = 0;
+  @Input() width: string = "auto";
+
   @Output() valueChange = new EventEmitter<Option<number>>();
 
   options$ = new BehaviorSubject<ReadonlyArray<DropDownItem>>([]);
diff --git a/src/bootstrap-variables.scss b/src/bootstrap-variables.scss
index 8811a7cf..2708939f 100644
--- a/src/bootstrap-variables.scss
+++ b/src/bootstrap-variables.scss
@@ -94,3 +94,5 @@ $bkd-container-max-width: 960px;
 $bkd-container-padding-x: $spacer;
 
 $bkd-presence-control-entry-min-width: 400px;
+
+$bkd-tests-mobile-breakpoint: 810px;