M #-: modify label view (#2781)

Modifies the way labels are displayed on vm templates

src/fireedge/src/client/components/Cards/VmTemplateCard.js

@@ -91,24 +91,51 @@ const VmTemplateCard = memo(
     )
 
     return (
-      <div {...rootProps} data-cy={`template-${ID}`}>
-        <div className={classes.figure}>
+      <div
+        {...rootProps}
+        data-cy={`template-${ID}`}
+        style={{
+          position: 'relative',
+          padding: 'calc(1vh - 0.3vw)',
+          minHeight: '110px',
+          minWidth: '400px',
+        }}
+      >
+        <div
+          className="label-container"
+          style={{
+            position: 'absolute',
+            top: '-9px',
+            right: '-7px',
+            padding: '8px',
+          }}
+        >
+          <MultipleTags tags={labels} />
+        </div>
+        <div
+          className={classes.figure}
+          style={{ flexBasis: '10%', aspectRatio: '1.33/1' }}
+        >
           <Image
             alt="logo"
             src={logoSource}
-            imgProps={{ className: classes.image }}
+            imgProps={{
+              className: classes.image,
+            }}
           />
         </div>
-        <div className={classes.main}>
+        <div
+          className={classes.main}
+          style={{ paddingTop: labels && labels.length > 0 ? '20px' : '0' }}
+        >
           <div className={classes.title}>
-            <Typography noWrap component="span">
+            <Typography noWrap component="span" title={NAME}>
               {NAME}
             </Typography>
             <span className={classes.labels}>
               {HYPERVISOR && <StatusChip text={HYPERVISOR} />}
               {LOCK && <Lock />}
               {isVR && <StatusChip text={'VROUTER'} />}
-              <MultipleTags tags={labels} />
             </span>
           </div>
           <div className={classes.caption}>

src/fireedge/src/client/components/MultipleTags/index.js

@@ -53,6 +53,10 @@ const MultipleTags = ({ tags, limitTags = 1, clipboard = false }) => {
             key={text}
             clipboard={clipboard}
             forceWhiteColor={isHidden}
+            sx={{
+              paddingTop: '2.5px',
+              paddingBottom: '2.5px',
+            }}
             {...(typeof tag === 'string' ? { text } : tag)}
           />
         )