[grid] Align the stereotype information for each Node (UI) (#9157)

Co-authored-by: Diego Molina <[email protected]>

Author: pujagani

javascript/grid-ui/src/components/Node/Node.tsx

@@ -43,6 +43,10 @@ const useStyles = makeStyles({
   },
   buttonMargin: {
     padding: 1,
+  },
+  slotInfo: {
+    marginBottom: 10,
+    marginRight: 0,
   }
 });
 
@@ -79,6 +83,35 @@ export default function Node(props) {
   // Then we need to know how many columns we will display.
   const columnWidth: GridSize = 12 / stereotypeColumns as any;
 
+  function CreateStereotypeGridItem(slotStereotype: any, index: any) {
+    return (
+      <Grid container item alignItems='center' spacing={1}>
+        <Grid item key={index}>
+          <img
+            src={browserLogo(slotStereotype.stereotype.browserName)}
+            className={classes.browserLogo}
+            alt="Browser Logo"
+          />
+        </Grid>
+        <Grid item key={index}>
+          <Typography className={classes.slotInfo}>
+            {slotStereotype.slots}
+          </Typography>
+        </Grid>
+        <Grid item key={index}>
+          <Typography className={classes.slotInfo}>
+            {
+              browserVersion(
+                slotStereotype.stereotype.browserVersion ??
+                slotStereotype.stereotype.version
+              )
+            }
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+
   return (
       <Card
           className={classes.root}
@@ -178,24 +211,8 @@ export default function Node(props) {
                             nodeInfo.slotStereotypes
                                 .slice(index * 3, Math.min((index * 3) + 3, nodeInfo.slotStereotypes.length))
                                 .map((slotStereotype: any, idx) => {
-                                  return (<Typography
-                                      color="textPrimary"
-                                      variant="h6"
-                                      key={idx}
-                                    >
-                                      <img
-                                        src={browserLogo(slotStereotype.stereotype.browserName)}
-                                        className={classes.browserLogo}
-                                        alt="Browser Logo"
-                                      />
-                                      {slotStereotype.slots}
-                                      {
-                                        browserVersion(
-                                          slotStereotype.stereotype.browserVersion ??
-                                          slotStereotype.stereotype.version
-                                        )
-                                      }
-                                    </Typography>
+                                  return(
+                                    CreateStereotypeGridItem(slotStereotype, idx) 
                                   )
                                 })}
                         </Grid>

javascript/grid-ui/src/util/browser-version.tsx

@@ -1,6 +1,6 @@
 const browserVersion = (version: string): string => {
   const browserVersion = version ?? "";
-  return browserVersion.length > 0 ? " - v." + browserVersion : browserVersion;
+  return browserVersion.length > 0 ? "v." + browserVersion : browserVersion;
 }
 
 export default browserVersion;