From d9979f9c0525fba5777afd9ae585311c704e345f Mon Sep 17 00:00:00 2001
From: CoolGame8 <kuli.kaduri@gmail.com>
Date: Mon, 23 Feb 2026 18:02:22 +0200
Subject: [PATCH] show team name in both status

---
 .../(dashboard)/components/team-info.tsx      | 24 ++++----
 .../field-schedule/components/match-row.tsx   |  4 +-
 .../components/next-match-panel.tsx           |  2 +-
 .../components/upcoming-matches-table.tsx     | 29 +++++-----
 .../components/schedule-table.tsx             |  7 +--
 .../components/judging-status-mobile.tsx      | 56 ++++++++++---------
 .../components/next-session-row.tsx           |  9 ++-
 .../components/session-card.tsx               | 13 +++--
 .../judging-status/components/session-row.tsx | 14 ++++-
 9 files changed, 88 insertions(+), 70 deletions(-)

diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/components/team-info.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/components/team-info.tsx
index 8d2b844be..590a1f92c 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/components/team-info.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/components/team-info.tsx
@@ -52,20 +52,20 @@ export const TeamInfo: React.FC<TeamInfoProps> = ({ team, size, textAlign = 'lef
             alignItems: 'center'
           }}
         >
+          {team.affiliation && `${team.affiliation}, `}
+          {team.city}
           {team.region && (
-            <>
-              <Box
-                component="span"
-                sx={{
-                  display: 'inline-flex',
-                  alignItems: 'center'
-                }}
-              >
-                <Flag region={team.region} size={flagSizeMap[size]} />
-              </Box>
-            </>
+            <Box
+              component="span"
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                ml: 0.5
+              }}
+            >
+              <Flag region={team.region} size={flagSizeMap[size]} />
+            </Box>
           )}
-          {team.affiliation && ` ${team.affiliation},`} {team.city}
         </Typography>
       </Stack>
     </Box>
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-schedule/components/match-row.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-schedule/components/match-row.tsx
index 3c5877a80..5a2df261d 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-schedule/components/match-row.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-schedule/components/match-row.tsx
@@ -71,7 +71,7 @@ export const MatchRow: React.FC<MatchRowProps> = ({ match, tables, teams }) => {
         return (
           <TableCell key={table.id} align="center">
             {team ? (
-              <Tooltip title={`${team.name} ${team.arrived ? '' : `(${t('not-arrived')})`}`} arrow>
+              <Tooltip title={team.arrived ? '' : t('not-arrived')} arrow>
                 <Box
                   sx={{
                     display: 'inline-flex',
@@ -94,7 +94,7 @@ export const MatchRow: React.FC<MatchRowProps> = ({ match, tables, teams }) => {
                       fontSize: isMobile ? '0.75rem' : '1rem'
                     }}
                   >
-                    #{team.number}
+                    #{team.number} {team.name}
                   </Typography>
                 </Box>
               </Tooltip>
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/next-match-panel.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/next-match-panel.tsx
index ae18724e1..9807a48c2 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/next-match-panel.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/next-match-panel.tsx
@@ -174,7 +174,7 @@ export function NextMatchPanel({ match }: NextMatchPanelProps) {
                     sx={{ flex: 1, fontSize: '1.05rem', fontWeight: 500 }}
                   >
                     {participant.team
-                      ? t('next-match.team-number', { number: participant.team.number })
+                      ? `${t('next-match.team-number', { number: participant.team.number })} ${participant.team.name}`
                       : '—'}
                   </Typography>
                   <Box
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/upcoming-matches-table.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/upcoming-matches-table.tsx
index 11650ff28..cab140bb9 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/upcoming-matches-table.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/field-status/components/upcoming-matches-table.tsx
@@ -11,8 +11,7 @@ import {
   TableRow,
   Paper,
   Typography,
-  Box,
-  Tooltip
+  Box
 } from '@mui/material';
 import { useMatchTranslations } from '@lems/localization';
 import { useTime } from '../../../../../../../../lib/time/hooks';
@@ -37,7 +36,7 @@ const TeamsCell = ({ participants }: TeamsCellProps) => {
         .sort((a, b) => a.table.name.localeCompare(b.table.name, undefined, { numeric: true }))
         .map((participant, idx) => {
           const { team, table } = participant;
-          const teamNumber = team?.number ? `#${team.number}` : '—';
+          const teamDisplay = team ? `#${team.number} ${team.name}` : '—';
 
           return (
             <Box key={idx} sx={{ display: 'flex', gap: 0.75, alignItems: 'center' }}>
@@ -47,19 +46,17 @@ const TeamsCell = ({ participants }: TeamsCellProps) => {
               >
                 {table?.name || 'Unknown'}
               </Typography>
-              <Tooltip title={team ? `${team.name}` : ''} arrow>
-                <Typography
-                  variant="body2"
-                  sx={{
-                    fontWeight: 500,
-                    minWidth: '2.5rem',
-                    fontFamily: 'monospace',
-                    fontSize: '1.1rem'
-                  }}
-                >
-                  {teamNumber}
-                </Typography>
-              </Tooltip>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontWeight: 500,
+                  minWidth: '2.5rem',
+                  fontFamily: 'monospace',
+                  fontSize: '1.1rem'
+                }}
+              >
+                {teamDisplay}
+              </Typography>
             </Box>
           );
         })}
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-schedule/components/schedule-table.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-schedule/components/schedule-table.tsx
index 3b6f790b8..19224bf36 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-schedule/components/schedule-table.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-schedule/components/schedule-table.tsx
@@ -174,10 +174,7 @@ export function ScheduleTable({ rooms, rows, sessionLength }: ScheduleTableProps
                   {row.rooms?.map(room => (
                     <TableCell key={room.id} align="center">
                       {room.team ? (
-                        <Tooltip
-                          title={`${room.team.name} ${room.team.arrived ? '' : `(${t('not-arrived')})`}`}
-                          arrow
-                        >
+                        <Tooltip title={room.team.arrived ? '' : t('not-arrived')} arrow>
                           <Box
                             sx={{
                               display: 'inline-flex',
@@ -200,7 +197,7 @@ export function ScheduleTable({ rooms, rows, sessionLength }: ScheduleTableProps
                                 fontSize: isMobile ? '0.75rem' : '1rem'
                               }}
                             >
-                              #{room.team.number}
+                              #{room.team.number} {room.team.name}
                             </Typography>
                           </Box>
                         </Tooltip>
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/judging-status-mobile.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/judging-status-mobile.tsx
index 6dfbe021b..e1d9567c1 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/judging-status-mobile.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/judging-status-mobile.tsx
@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import dayjs from 'dayjs';
-import { Box, Card, CardContent, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Card, CardContent, Grid, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import { useJudgingStatus } from '../judging-status-context';
 import { SessionCard } from './session-card';
 
@@ -65,18 +65,21 @@ export const JudgingStatusMobile: React.FC = () => {
             </Stack>
           </Paper>
 
-          {sortedRooms.map(room => {
-            const session = currentSessions.find(s => s.room.id === room.id);
-            return session ? (
-              <SessionCard
-                key={`${room.id}-${session.id}`}
-                session={session}
-                room={room}
-                isCurrentRound={true}
-                sessionLength={sessionLength}
-              />
-            ) : null;
-          })}
+          <Grid container spacing={2}>
+            {sortedRooms.map(room => {
+              const session = currentSessions.find(s => s.room.id === room.id);
+              return session ? (
+                <Grid key={`${room.id}-${session.id}`} size={{ xs: 12, sm: 6, md: 4 }}>
+                  <SessionCard
+                    session={session}
+                    room={room}
+                    isCurrentRound={true}
+                    sessionLength={sessionLength}
+                  />
+                </Grid>
+              ) : null;
+            })}
+          </Grid>
         </Box>
       )}
 
@@ -93,18 +96,21 @@ export const JudgingStatusMobile: React.FC = () => {
             </Stack>
           </Paper>
 
-          {sortedRooms.map(room => {
-            const session = nextSessions.find(s => s.room.id === room.id);
-            return session ? (
-              <SessionCard
-                key={`${room.id}-${session.id}`}
-                session={session}
-                room={room}
-                isCurrentRound={false}
-                sessionLength={sessionLength}
-              />
-            ) : null;
-          })}
+          <Grid container spacing={2}>
+            {sortedRooms.map(room => {
+              const session = nextSessions.find(s => s.room.id === room.id);
+              return session ? (
+                <Grid key={`${room.id}-${session.id}`} size={{ xs: 12, sm: 6, md: 4 }}>
+                  <SessionCard
+                    session={session}
+                    room={room}
+                    isCurrentRound={false}
+                    sessionLength={sessionLength}
+                  />
+                </Grid>
+              ) : null;
+            })}
+          </Grid>
         </Box>
       )}
     </Stack>
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/next-session-row.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/next-session-row.tsx
index c0c97861f..979cc1fa1 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/next-session-row.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/next-session-row.tsx
@@ -15,9 +15,14 @@ export const NextSessionRow: React.FC<NextSessionRowProps> = ({ session }) => {
   const team = session?.team;
 
   return (
-    <TableCell align="center" sx={{ verticalAlign: 'top', py: 2 }}>
+    <TableCell align="center" sx={{ py: 2, height: '100%' }}>
       {session && team ? (
-        <Stack spacing={1} alignItems="center">
+        <Stack
+          spacing={1}
+          alignItems="center"
+          sx={{ height: '100%', minHeight: 150 }}
+          justifyContent="center"
+        >
           <TeamInfo team={team} size="sm" textAlign="center" />
           {!team.arrived && (
             <Chip
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-card.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-card.tsx
index 73c2ae922..b7e06a5b5 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-card.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-card.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 import dayjs from 'dayjs';
-import { Card, CardContent, Stack, Typography } from '@mui/material';
+import { Box, Card, CardContent, Stack, Typography } from '@mui/material';
 import { JudgingSession, Room } from '../graphql';
 import { TeamInfo } from '../../../components/team-info';
 import { SessionStatusChip } from './session-status-chip';
@@ -28,11 +28,14 @@ export const SessionCard: React.FC<SessionCardProps> = ({
       key={`${room.id}-${session.id}`}
       sx={{
         mb: 2,
-        bgcolor: isCurrentRound ? 'primary.50' : 'background.paper'
+        bgcolor: isCurrentRound ? 'primary.50' : 'background.paper',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
       }}
     >
-      <CardContent>
-        <Stack spacing={1.5}>
+      <CardContent sx={{ display: 'flex', flexDirection: 'column', flex: 1, pb: 2 }}>
+        <Stack spacing={1.5} sx={{ flex: 1 }}>
           <Typography variant="subtitle2" color="text.secondary" sx={{ fontWeight: 600 }}>
             {t('table.room', { name: room.name })}
           </Typography>
@@ -41,6 +44,8 @@ export const SessionCard: React.FC<SessionCardProps> = ({
             <>
               <TeamInfo team={team} size="sm" />
 
+              <Box sx={{ flex: 1 }} />
+
               <Stack direction="row" spacing={0.5} alignItems="center" flexWrap="wrap">
                 <SessionStatusChip
                   status={session.status}
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-row.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-row.tsx
index 61ee5c3a2..6e175b159 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-row.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/(dashboard)/reports/judging-status/components/session-row.tsx
@@ -17,14 +17,22 @@ export const SessionRow: React.FC<SessionRowProps> = ({ session, sessionLength }
   const team = session.team;
 
   return (
-    <TableCell align="center" sx={{ verticalAlign: 'top', py: 2 }}>
+    <TableCell align="center" sx={{ py: 2, height: '100%' }}>
       {session && team ? (
-        <Stack spacing={1} alignItems="center">
+        <Stack spacing={1} alignItems="center" sx={{ height: '100%', minHeight: 150 }}>
           <Box sx={{ minWidth: 180 }}>
             <TeamInfo team={team} size="sm" textAlign="center" />
           </Box>
 
-          <Stack direction="row" spacing={0.5} alignItems="center" flexWrap="wrap">
+          <Box sx={{ flex: 1 }} />
+
+          <Stack
+            direction="row"
+            spacing={0.5}
+            alignItems="center"
+            flexWrap="wrap"
+            justifyContent="center"
+          >
             <SessionStatusChip
               status={session.status}
               called={session.called}