[plugin-emoji] default css is a little wonky

[warren-bank]

I adjusted my own instance with:

  import '@cartamd/plugin-emoji/default.css'
  import './css/emoji.css'

where emoji.css includes the following overrides:

.carta-emoji {
  display: block !important;
  word-break: break-word !important;
  overflow-x: auto;
  overflow-y: auto !important;
}

.carta-emoji button {
  display: inline-block !important;
  margin: 3px;
  height: 2rem;
  aspect-ratio: unset !important;
  white-space: nowrap;
}

to summarize:

• the main issue is that several emoji codes each resolve to a sequence of unicode characters
• the default css uses a grid layout, so an extra wide button stretches the width of an entire column
• the default css uses an aspect ratio of 1, so an extra wide button is also made extra tall.. and stretches the height of an entire row

test case:

1. type: :h
2. type: :he
3. type: :hea
   • several of the heart emojis are multi character

[github-actions]

🎉 This issue has been resolved in version @cartamd/plugin-emoji-v4.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀