General: Improve interview process detail page responsiveness

[Abi107717]

Checklist

General

• I tested all changes and their related features with all corresponding user types.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• I strictly followed the client coding and design guidelines.
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.

Motivation and Context

The interview process detail page suffered from layout overlapping issues when resizing the window, particularly with slot cards and filter tabs. The goal was to implement a fluid layout that adapts gracefully to different screen widths to prevent content from merging or breaking.

Description

Implemented a responsive grid for the slots section that dynamically adjusts column counts and updated the filter tabs to wrap properly instead of scrolling.

❗️Note: Full mobile responsiveness is not yet perfect and will be addressed in a future update; the primary focus here was to ensure stability during window resizing.❗️

Steps for Testing

Prerequisites:

1. Log in to TumApply as professor
2. go to /interviews/overview
3. Choose a process
4. Resize window and verify, responsiveness is acceptable

Review Progress

Code Review

• Code Review 1

Manual Tests

• Test 1

Test Coverage

Warning: Client tests failed. Coverage could not be fully measured. Please check the workflow logs.

Last updated: 2026-01-28 16:25:09 UTC

Screenshots

[github-actions]

@Abi107717 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Abi107717 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Abi107717 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[Bofan-Zhu]

Will responsiveness for interviews/overview page also be addressed in future PRs?

On small screens the current process card needs to be structured in another way

[Bofan-Zhu]

Thank you for improving the responsiveness of the interview pages. It already looks a lot better!

If you open the slot creation modal and reduce your screen height, some components e.g. save button are not visible anymore and the user also cannot scroll down. Maybe we could fix that as well

[github-actions]

@Abi107717 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[Cathy0123456789]

Thank you for fixing, I tested it locally, it doesn't overlap anymore now :)
I see two scrollbars now though, maybe that could be changed?

[github-actions]

@Abi107717 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[sachmii]

Tested locally, works just fine