Fix selected parameter card long name overflow (#1087)

* Line wrap chart title

* Improve card layout

* Fix an old comment

Author: Turnlings

gcs/src/components/fla/chartDataCard.jsx

@@ -75,13 +75,14 @@ function ChartDataCard({ item, unit, messageMeans }) {
     <div className="inline-flex flex-col items-center gap-2 px-2 py-2 mr-3 text-xs font-bold text-white border border-gray-700 rounded-lg bg-grey-200">
       {/* Title and Delete Button */}
       <div className="inline-flex items-center content-center justify-between w-full">
-        <p className="text-md">
+        <p className="text-md flex-1 min-w-0 break-words">
           {item.label} <span className="text-gray-400">({unit})</span>
         </p>
         <ActionIcon
           variant="subtle"
           color={"red"}
           onClick={() => removeDataset(item.label)}
+          className="self-start"
         >
           <IconTrash size={18} />
         </ActionIcon>
@@ -100,8 +101,8 @@ function ChartDataCard({ item, unit, messageMeans }) {
         onChangeEnd={(color) => changeColor(item.label, color)}
       />
 
-      {/* Min, max, min */}
-      <Box className="w-full text-gray-400">
+      {/* Min, max, mean */}
+      <Box className="w-full text-gray-400 mt-auto">
         Min: {messageMeans[item.label]?.min}, Max:{" "}
         {messageMeans[item.label]?.max}, Mean: {messageMeans[item.label]?.mean}
       </Box>

gcs/src/components/fla/mainDisplay.jsx

@@ -180,7 +180,7 @@ export default function MainDisplay({ closeLogFile, chartData, customColors }) {
                     className="min-h-0 h-full pb-4"
                   >
                     <ScrollArea className="h-full">
-                      <div className="grid grid-cols-6 gap-2 py-2">
+                      <div className="grid grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 gap-2 py-2">
                         {chartData.datasets.map((item) => (
                           <Fragment key={item.label}>
                             <ChartDataCard