Align the calendar and date wherever used

[ashu8912]

If you go to a timestamp that uses the date and calendar option to show a date you will see that the date and calendar are not properly aligned

The date and calendar should be correctly center aligned.

[thiyagarajan17]

Could you assign me for the fix.. would love to work on it

[joaquimrocha]

@thiyagarajan17 , this is already assigned to a member of our team.
We'd be very happy if you can work on another task. Let us know if there's anything not assigned that you would like to work on.

[joaquimrocha]

@thiyagarajan17 , we couldn't yet pick this issue up after all. We're happy to have you do it if you want, and we're here to help.

[egomezbpedro]

Hi team,

Could this perhaps be done in the Label file by modifying the following:

const useHoverInfoLabelStyles = makeStyles({
  display: {
-    display: 'inline-block',
+   display: 'flex',
+   alignItems: 'center',
+   justifyContent: 'flex-end'
  },
  noWrap: {
    whiteSpace: 'nowrap',
  },
  icon: {
    marginRight: '0.2rem',
    marginLeft: '0.2rem',
  },
});

Is also possible to use a child or possibly a sibling selector while keeping the inline-block as in:

const useHoverInfoLabelStyles = makeStyles({
  display: {
      display: 'inline-block',
+   "& svg": {
+      verticalAlign: 'middle'
+    },
  },
  noWrap: {
    whiteSpace: 'nowrap',
  },
  icon: {
    marginRight: '0.2rem',
    marginLeft: '0.2rem',
  },
});

Please let me know any feedback or other workaround suggestion or for this.

Thanks, Happy Friday :)

[egomezbpedro]

Even so the checking with the last code snippet it seems that the icon although gets centred inside the p tag is not that very well aligned with the text.