concat .note text with model name

frontend/src/pages/LeaderboardPage/components/Leaderboard/utils/columnUtils.js

@@ -530,60 +530,66 @@ export const createColumns = (
                 flex: 1,
               }}
             >
-              <Link
-                href={`https://huggingface.co/${modelName}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label={`View ${modelName} on Hugging Face Hub`}
-                title={TABLE_TOOLTIPS.HUB_LINK(modelName)}
+              <Box
                 sx={{
-                  textDecoration: "none",
-                  color: "info.main",
                   display: "flex",
                   alignItems: "center",
-                  gap: 0.5,
-                  "&:hover": {
-                    textDecoration: "underline",
-                    color: (theme) =>
-                      theme.palette.mode === "dark"
-                        ? theme.palette.info.light
-                        : theme.palette.info.dark,
-                    "& svg": {
-                      opacity: 0.8,
-                    },
-                  },
+                  flex: 1,
+                  minWidth: 0,
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
-                  flex: 1,
-                  minWidth: 0,
-                  fontWeight: row.original.static_rank <= 3 ? 600 : "inherit",
                 }}
               >
-                <HighlightedText text={modelName} searchValue={textSearch} />
-                <OpenInNewIcon
-                  sx={{
-                    fontSize: "0.75rem",
-                    opacity: 0.6,
-                    transition: "opacity 0.2s ease-in-out",
-                    ml: 0.5,
-                    flexShrink: 0,
-                  }}
-                />
-              </Link>
-              {modelNote && (
-                <Typography
-                  variant="body2"
+                <Link
+                  href={`https://huggingface.co/${modelName}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`View ${modelName} on Hugging Face Hub`}
+                  title={TABLE_TOOLTIPS.HUB_LINK(modelName)}
                   sx={{
-                    color: "text.secondary",
-                    fontSize: "0.875rem",
-                    fontStyle: "italic",
-                    flexShrink: 0,
+                    textDecoration: "none",
+                    color: "info.main",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    "&:hover": {
+                      textDecoration: "underline",
+                      color: (theme) =>
+                        theme.palette.mode === "dark"
+                          ? theme.palette.info.light
+                          : theme.palette.info.dark,
+                      "& svg": {
+                        opacity: 0.8,
+                      },
+                    },
+                    fontWeight:
+                      row.original.static_rank <= 3 ? 600 : "inherit",
                   }}
                 >
-                  ({modelNote})
-                </Typography>
-              )}
+                  <HighlightedText
+                    text={modelName}
+                    searchValue={textSearch}
+                  />
+                  <OpenInNewIcon
+                    sx={{
+                      fontSize: "0.75rem",
+                      opacity: 0.6,
+                      transition: "opacity 0.2s ease-in-out",
+                      ml: 0.5,
+                      flexShrink: 0,
+                    }}
+                  />
+                </Link>
+                {modelNote && (
+                  <Typography
+                    component="span"
+                    sx={{ pl: 0.5, color: "text.secondary" }}
+                  >
+                    ({modelNote})
+                  </Typography>
+                )}
+              </Box>
               {isReasoningModel && (
                 <Tooltip
                   title="This model uses reasoning capabilities to think through problems step by step."