diff --git a/services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx b/services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx
index ce8996124..75a82b90d 100644
--- a/services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx
+++ b/services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx
@@ -1,5 +1,6 @@
import { FilterAlt as FilterAltIcon, NorthEast as NorthEastIcon } from '@mui/icons-material'
import { TableBody, TableCell, TableHead, TableRow, Tooltip, IconButton, Stack } from '@mui/material'
+import { blue } from '@mui/material/colors'
import { orderBy } from 'lodash'
import moment from 'moment'
import { Link } from 'react-router'
@@ -120,7 +121,13 @@ export const StudyrightsTable = ({ handleStudyPlanChange, student, selectedStudy
Completed
-
+
{studyRightRows.map(studyRight => {
const numberOfProgrammes = studyRight.programmes.length
const rowIsFilterable = studyRight.studyPlanId != null
@@ -129,20 +136,14 @@ export const StudyrightsTable = ({ handleStudyPlanChange, student, selectedStudy
const isFirstRow = index === 0
const isLastRow = index === numberOfProgrammes - 1
- let borderWidth = '1px'
- if (isFirstRow && numberOfProgrammes > 1) {
- borderWidth = '1px 1px 0 1px'
- } else if (isLastRow && numberOfProgrammes > 1) {
- borderWidth = '0 1px 1px 1px'
- }
-
return (
(rowIsFilterable ? handleStudyPlanChange(studyRight.studyPlanId) : null)}
style={{
cursor: rowIsFilterable ? 'pointer' : 'not-allowed',
- borderWidth,
+ borderWidth: `0 1px ${isLastRow ? '1px' : '0'} 1px`, // Bottom border only for the last programme in the study right
+ backgroundColor: studyRight.studyPlanId === selectedStudyPlanId ? blue[50] : 'inherit',
}}
>
{isFirstRow && (