[Frontend] inconsistent layout fixes

services/frontend/src/components/ColorizedCoursesTable/FacultiesTab/index.tsx

@@ -101,7 +101,7 @@ export const FacultiesTab = () => {
   }
 
   return (
-    <Section wrapperSx={{ width: '100%', my: '1em' }}>
+    <Section wrapperSx={{ width: '100%' }}>
       <Stack
         direction={{ xs: 'column', sm: 'row' }}
         justifyContent={{ xs: 'center', sm: 'space-evenly' }}

services/frontend/src/components/ColorizedCoursesTable/SemestersTab/index.tsx

@@ -67,10 +67,7 @@ export const SemestersTab = ({ languagecenterview }: { languagecenterview: boole
   }
 
   return (
-    <Section
-      title={languagecenterview ? undefined : 'Programme courses by semester'}
-      wrapperSx={{ width: '100%', mt: '1em' }}
-    >
+    <Section title={languagecenterview ? undefined : 'Programme courses by semester'} wrapperSx={{ width: '100%' }}>
       <Stack
         direction={{ xs: 'column', sm: 'row' }}
         justifyContent={{ xs: 'center', sm: 'space-evenly' }}

services/frontend/src/components/ColorizedCoursesTable/common.jsx

@@ -95,10 +95,11 @@ export const CourseFilter = ({ setCourseFilter }) => {
 
   return (
     <TextField
-      label="Filter by code or name"
+      label="Filter courses by code or name"
       onChange={event => setTextField(event.target.value)}
       size="small"
       slotProps={{ input: { endAdornment: <SearchIcon fontSize="small" htmlColor={theme.palette.grey[700]} /> } }}
+      sx={{ width: '320px' }}
       value={textField}
     />
   )

services/frontend/src/components/ColorizedCoursesTable/index.tsx

@@ -94,9 +94,9 @@ export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, pane
   }
 
   return (
-    <Stack alignItems="center">
+    <Stack alignItems="left">
       {displayedPanes.length > 1 && (
-        <Tabs onChange={(_, newTab) => setTab(newTab)} value={tab}>
+        <Tabs onChange={(_, newTab) => setTab(newTab)} sx={{ mb: '1em' }} value={tab}>
           {displayedPanes.map(pane => (
             <Tab icon={pane.icon} iconPosition="start" key={pane.label} label={pane.label} />
           ))}

services/frontend/src/pages/StudyProgramme/StudyTracksAndClassStatisticsTab/ProgressTable.tsx

@@ -21,7 +21,7 @@ export const ProgressTable = ({ data, titles }: { data: (string | number)[][]; t
 
   return (
     <TableContainer component={Box}>
-      <StyledTable data-cy="study-programme-progress-data-table" showCellBorders size="small">
+      <StyledTable data-cy="study-programme-progress-data-table" nowrapBody showCellBorders>
         <TableHead>
           <TableRow>
             {titles?.map((title, index) => (