diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index 3fe81f77..599611b2 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -18,7 +18,6 @@ :src="reaction.url" :title="reaction.name" class="reaction-emoji" - width="2.55em" height="2.55em" > {{ reaction.count }} @@ -50,6 +49,7 @@ display: flex; margin-top: 0.25em; flex-wrap: wrap; + container-type: inline-size; } .unicode-emoji { @@ -65,7 +65,8 @@ justify-content: center; box-sizing: border-box; .reaction-emoji { - width: 2.55em !important; + width: auto; + max-width: 96cqw; height: 2.55em !important; margin-right: 0.25em; } diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss index db08ef1e..63df7d74 100644 --- a/src/components/rich_content/rich_content.scss +++ b/src/components/rich_content/rich_content.scss @@ -50,7 +50,6 @@ .emoji { display: inline-block; - width: var(--emoji-size, 32px); height: var(--emoji-size, 32px); } diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 230a27ac..d618f65e 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -22,21 +22,18 @@ ._mfm_x2_ { .emoji { - width: 100px; height: 100px; } } ._mfm_x3_ { .emoji { - width: 150px; height: 150px; } } ._mfm_x4_ { .emoji { - width: 200px; height: 200px; } } diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index ab13141e..62acf5ac 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -71,7 +71,7 @@ img, video { &.emoji { - width: 50px; + max-width: 100%; height: 50px; } } @@ -89,7 +89,6 @@ animation: none !important; } .emoji { - width: 32px !important; height: 32px !important; } }