From f6dd943fc41cc5b0ad1366306c412e377a6f834f Mon Sep 17 00:00:00 2001
From: CoolGame8 <kuli.kaduri@gmail.com>
Date: Sat, 7 Mar 2026 17:00:32 +0200
Subject: [PATCH] UI issues

---
 .../register-teams-dialog-content.tsx         |  4 +-
 .../compare/components/radar-chart-utils.tsx  |  2 +
 .../compare/components/radar-charts.tsx       | 43 +++++++++++++++----
 .../compare/components/team-info.tsx          | 35 ++++++++++++---
 4 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/apps/admin/src/app/[locale]/(dashboard)/events/[slug]/teams/components/register-teams-dialog-content.tsx b/apps/admin/src/app/[locale]/(dashboard)/events/[slug]/teams/components/register-teams-dialog-content.tsx
index 92d6ff8a6..de6664852 100644
--- a/apps/admin/src/app/[locale]/(dashboard)/events/[slug]/teams/components/register-teams-dialog-content.tsx
+++ b/apps/admin/src/app/[locale]/(dashboard)/events/[slug]/teams/components/register-teams-dialog-content.tsx
@@ -144,7 +144,9 @@ export const RegisterTeamsDialogContent: React.FC<RegisterTeamsDialogContentProp
                     }
                   >
                     <ListItemText primary={`#${team.number}`} secondary={team.name} />
-                    <Flag region={team.region} size={16} />
+                    <Box sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
+                      <Flag region={team.region} size={16} />
+                    </Box>
                   </ListItem>
                 ))}
                 {availableTeams.length === 0 && (
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-chart-utils.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-chart-utils.tsx
index 90da0d11c..7e6ad3c81 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-chart-utils.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-chart-utils.tsx
@@ -4,11 +4,13 @@ import type { Team } from '../graphql/types';
 export interface RadarChartDataPoint {
   field: string;
   score: number;
+  [key: string]: string | number;
 }
 
 export interface CategoryDataPoint {
   category: string;
   score: number;
+  [key: string]: string | number;
 }
 
 export const calculateAverage = (values: number[]) =>
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-charts.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-charts.tsx
index 6ad4624b6..57afee254 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-charts.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/radar-charts.tsx
@@ -26,19 +26,44 @@ interface CategoryRadarChartProps {
   category: string;
 }
 
-const RadarChartContainer = ({
-  data,
-  dataKey,
-  color = '#64B5F6'
-}: {
-  data: any[];
+interface CustomTickProps {
+  payload?: { value: string };
+  x?: number;
+  y?: number;
+  cx?: number;
+  cy?: number;
+}
+
+const CustomTick = ({ payload, x = 0, y = 0, cx = 0, cy = 0 }: CustomTickProps) => {
+  const maxLength = 20;
+  const text = payload?.value || '';
+  const truncated = text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+
+  return (
+    <text
+      x={x}
+      y={y}
+      textAnchor={x > cx ? 'start' : x < cx ? 'end' : 'middle'}
+      dominantBaseline={y > cy ? 'hanging' : y < cy ? 'auto' : 'middle'}
+      fontSize={11}
+      fill="currentColor"
+    >
+      {truncated}
+    </text>
+  );
+};
+
+interface RadarChartContainerProps {
+  data: Array<{ [key: string]: string | number }>;
   dataKey: string;
   color?: string;
-}) => (
+}
+
+const RadarChartContainer = ({ data, dataKey, color = '#64B5F6' }: RadarChartContainerProps) => (
   <ResponsiveContainer width="100%" height={250}>
-    <RadarChart data={data} margin={{ top: 5, right: 10, bottom: 5, left: 10 }}>
+    <RadarChart data={data} margin={{ top: 20, right: 30, bottom: 20, left: 30 }}>
       <PolarGrid />
-      <PolarAngleAxis dataKey={dataKey} tick={{ fontSize: 14 }} />
+      <PolarAngleAxis dataKey={dataKey} tick={<CustomTick />} />
       <PolarRadiusAxis angle={90} domain={[0, 4]} tick={{ fontSize: 12 }} />
       <Radar dataKey="score" stroke={color} fill={color} fillOpacity={0.6} />
     </RadarChart>
diff --git a/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/team-info.tsx b/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/team-info.tsx
index 9d659db8d..d97a62aec 100644
--- a/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/team-info.tsx
+++ b/apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/compare/components/team-info.tsx
@@ -36,9 +36,18 @@ export function TeamInfo({ team }: TeamInfoProps) {
   }, [team.rubrics]);
 
   return (
-    <Box sx={{ flexShrink: 0, textAlign: 'left', order: 1 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Typography variant="h6" fontWeight={600}>
+    <Box sx={{ flexShrink: 0, textAlign: 'left', order: 1, minWidth: 0, maxWidth: '100%' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
+        <Typography
+          variant="h6"
+          fontWeight={600}
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            minWidth: 0
+          }}
+        >
           {team.name} - #{team.number}
         </Typography>
         {team.profileDocumentUrl && (
@@ -49,11 +58,27 @@ export function TeamInfo({ team }: TeamInfoProps) {
           </Tooltip>
         )}
       </Box>
-      <Typography variant="h6" color="text.secondary">
+      <Typography
+        variant="h6"
+        color="text.secondary"
+        sx={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        }}
+      >
         {team.affiliation}
       </Typography>
       {team.judgingSession?.room && (
-        <Typography variant="h6" color="text.secondary">
+        <Typography
+          variant="h6"
+          color="text.secondary"
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
           {t('judging-room')}: {team.judgingSession.room.name}
         </Typography>
       )}