[Study programme] Improve styling

services/frontend/src/pages/StudyProgramme/StudyTracksAndClassStatisticsTab/StudyTrackDataTable/Row.tsx

@@ -86,7 +86,7 @@ export const Row = ({
   const title =
     studyTracks[correctStudyTrack] === undefined
       ? correctStudyTrack
-      : `${getTextIn(studyTracks[correctStudyTrack] as Name)}, ${correctStudyTrack}`
+      : `${getTextIn(studyTracks[correctStudyTrack] as Name)} (${correctStudyTrack})`
 
   return (
     <TableRow>
@@ -96,7 +96,7 @@ export const Row = ({
         }
         if (index === 0) {
           return (
-            <TableCell align="left" key={getCellKey(year, index)} sx={{ whiteSpace: 'nowrap' }}>
+            <TableCell align="right" key={getCellKey(year, index)} sx={{ whiteSpace: 'nowrap' }}>
               {title}
               {populationLinkVisible && (
                 <PopulationLink
@@ -122,7 +122,7 @@ export const Row = ({
             />
           )
         }
-        return <BasicCell key={getCellKey('other-country', index)} value={value} />
+        return <BasicCell key={getCellKey('basic-cell', index)} value={value} />
       })}
     </TableRow>
   )

services/frontend/src/pages/StudyProgramme/StudyTracksAndClassStatisticsTab/StudyTrackDataTable/SingleStudyTrackRow.tsx

@@ -1,6 +1,7 @@
 import { TableCell, TableRow } from '@mui/material'
 
 import { PopulationLink } from '@/components/material/PopulationLink'
+import { BasicCell } from './BasicCell'
 import { OtherCountriesCell } from './OtherCountriesCell'
 import { getCellKey, shouldBeHidden } from './util'
 
@@ -31,6 +32,23 @@ export const SingleStudyTrackRow = ({
         if (shouldBeHidden(showPercentages, value)) {
           return null
         }
+        if (index === 0) {
+          return (
+            <TableCell align="right" key={getCellKey(code, index)} sx={{ whiteSpace: 'nowrap' }}>
+              {value}
+              {populationLinkVisible && (
+                <PopulationLink
+                  combinedProgramme={combinedProgramme}
+                  cypress={year.split(' - ')[0]}
+                  studyProgramme={studyProgramme}
+                  studyTrack={code}
+                  year={year}
+                  years={calendarYears}
+                />
+              )}
+            </TableCell>
+          )
+        }
         if (index === row.length - 2 && otherCountriesStats) {
           return (
             <OtherCountriesCell
@@ -42,21 +60,7 @@ export const SingleStudyTrackRow = ({
             />
           )
         }
-        return (
-          <TableCell align="right" key={getCellKey(code, index)} sx={{ whiteSpace: 'nowrap' }}>
-            {value}
-            {index === 0 && populationLinkVisible && (
-              <PopulationLink
-                combinedProgramme={combinedProgramme}
-                cypress={year.split(' - ')[0]}
-                studyProgramme={studyProgramme}
-                studyTrack={code}
-                year={year}
-                years={calendarYears}
-              />
-            )}
-          </TableCell>
-        )
+        return <BasicCell key={getCellKey('basic-cell', index)} value={value} />
       })}
     </TableRow>
   )