[Overview][Lang center] fix atrocious layouts

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

@@ -1,3 +1,4 @@
+import Stack from '@mui/material/Stack'
 import { getFilteredRowModel } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
@@ -17,15 +18,18 @@ import { useColumns } from '@/components/ColorizedCoursesTable/SemestersTab/logi
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { OodiTable } from '@/components/OodiTable'
 import { OodiTableExcelExport } from '@/components/OodiTable/excelExport'
+import { Section } from '@/components/Section'
 import { useDebouncedState } from '@/hooks/debouncedState'
 
-export const SemestersTab = () => {
+type TotalRow = ReturnType<typeof calculateTotals>
+
+export const SemestersTab = ({ languagecenterview }: { languagecenterview: boolean }) => {
   const { getTextIn } = useLanguage()
   const { semesters, numberMode, colorMode, selectedSemesters, data } = useColorizedCoursesTableContext()
   const [courseFilter, setCourseFilter] = useDebouncedState('', 250)
 
-  const totalRow = useMemo(() => {
-    if (!data) return {}
+  const totalRow = useMemo<TotalRow>(() => {
+    if (!data) return {} as TotalRow
     return calculateTotals(data.tableData, selectedSemesters)
   }, [data, selectedSemesters])
 
@@ -59,17 +63,16 @@ export const SemestersTab = () => {
       useZebrastripes: colorMode === 'none',
       columnFilters: [{ id: 'Course', value: courseFilter }],
     },
-    onColumnFiltersChange: setCourseFilter,
     getFilteredRowModel: getFilteredRowModel(),
   }
 
   return (
-    <div>
-      <div className="options-container">
+    <Section title={languagecenterview ? undefined : 'Programme courses by semester'} wrapperSx={{ width: '100%' }}>
+      <Stack direction={{ xs: 'column', sm: 'row' }} justifyContent={{ xs: 'center', sm: 'space-evenly' }} spacing={5}>
         <SemesterRangeSelector />
         <NumberModeSelector />
         <ColorModeSelector />
-      </div>
+      </Stack>
       <OodiTable
         columns={cols}
         cy="ooditable-semesters"
@@ -82,6 +85,6 @@ export const SemestersTab = () => {
           </>
         }
       />
-    </div>
+    </Section>
   )
 }

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

@@ -1,6 +1,7 @@
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import { createContext, useContext, useState, useEffect } from 'react'
+import { theme, SearchIcon } from '@/theme'
 
 export const ColorizedCoursesTableContext = createContext()
 
@@ -93,7 +94,13 @@ export const CourseFilter = ({ setCourseFilter }) => {
   }, [textField])
 
   return (
-    <TextField label="Course name/code filter" onChange={event => setTextField(event.target.value)} value={textField} />
+    <TextField
+      label="Filter by code or name"
+      onChange={event => setTextField(event.target.value)}
+      size="small"
+      slotProps={{ input: { endAdornment: <SearchIcon fontSize="small" htmlColor={theme.palette.grey[700]} /> } }}
+      value={textField}
+    />
   )
 }
 

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

@@ -11,7 +11,6 @@
   gap: 1em;
   margin: auto;
   flex-direction: column;
-  max-width: 25vw;
 }
 
 .colored-info-expander {

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

@@ -1,4 +1,3 @@
-import Paper from '@mui/material/Paper'
 import Stack from '@mui/material/Stack'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
@@ -11,7 +10,7 @@ import { LoadingSection } from '@/components/Loading'
 import { useSemesters } from '@/hooks/useSemesters'
 import '@/components/ColorizedCoursesTable/index.css'
 
-export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, panes }) => {
+export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, panes, mode }) => {
   const { semesters: allSemesters, currentSemester } = useSemesters()
   const semesters = Object.values(allSemesters).filter(
     // 135 = Fall 2017
@@ -59,7 +58,7 @@ export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, pane
     {
       name: 'Semesters',
       label: 'By semesters',
-      render: () => <SemestersTab />,
+      render: () => <SemestersTab languagecenterview={mode === 'languagecenterview'} />,
     },
   ]
 
@@ -96,11 +95,9 @@ export const ColorizedCoursesTable = ({ fetchDataHook, fetchDataHookParams, pane
           ))}
         </Tabs>
       )}
-      <Paper variant="outlined">
-        <ColorizedCoursesTableContext.Provider value={settingsContext}>
-          {displayedPanes.at(tab)?.render() ?? null}
-        </ColorizedCoursesTableContext.Provider>
-      </Paper>
+      <ColorizedCoursesTableContext.Provider value={settingsContext}>
+        {displayedPanes.at(tab)?.render() ?? null}
+      </ColorizedCoursesTableContext.Provider>
     </Stack>
   )
 }

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

@@ -18,6 +18,7 @@ export const LanguageCenterView = () => {
       <ColorizedCoursesTable
         fetchDataHook={useGetLanguageCenterDataQuery}
         fetchDataHookParams={undefined}
+        mode="languagecenterview"
         panes={['Faculties', 'Semesters']}
       />
     </>

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

@@ -18,6 +18,7 @@ export const Section = ({
   isError = false,
   title,
   contentSx = {},
+  wrapperSx = {},
 }: {
   children: React.ReactNode
   cypress?: string
@@ -27,9 +28,10 @@ export const Section = ({
   isError?: boolean
   title?: string
   contentSx?: SxProps<Theme>
+  wrapperSx?: SxProps<Theme>
 }) => {
   return (
-    <Paper data-cy={`${cypress}-section`} sx={{ padding: 2 }} variant="outlined">
+    <Paper data-cy={`${cypress}-section`} sx={{ padding: 2, ...wrapperSx }} variant="outlined">
       <Stack alignItems="center" direction="row" justifyContent="space-between" sx={{ paddingBottom: 1 }}>
         <Typography component="h2" variant="h5">
           {title}

services/frontend/src/pages/StudyProgramme/ProgrammeCoursesTab/index.tsx

@@ -46,6 +46,8 @@ export const ProgrammeCoursesTab = ({
         <ColorizedCoursesTable
           fetchDataHook={useGetColorizedTableCourseStatsQuery}
           fetchDataHookParams={{ id: studyProgramme }}
+          key="BySemesterTab"
+          mode="programmeCourses"
           panes={['Semesters']}
         />
       ),
@@ -53,7 +55,7 @@ export const ProgrammeCoursesTab = ({
   ]
 
   return (
-    <Stack gap={2}>
+    <Stack spacing={2}>
       <Tabs data-cy="programme-courses-tabs" onChange={(_event, newTab) => setCurrentTab(newTab)} value={currentTab}>
         {tabs.map(tab => (
           <Tab data-cy={tab.cypress} icon={tab.icon} iconPosition="start" key={tab.key} label={tab.label} />