diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71693f790a..0fe5b0ac28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@
- Enhance: コントロールパネル内のファイル一覧でセンシティブなファイルを区別しやすく
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
- Fix: 月の違う同じ日はセパレータが表示されないのを修正
+- Fix: 縦横比が極端なカスタム絵文字を表示する際にレイアウトが崩れる箇所があるのを修正
+ (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/725)
- Fix: ERROR CODE: APP_IMPORT on iOS <= 16.3 (SyntaxError: Invalid regular expression: invalid group specifier name)
### Server
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 5ba175fc35..3bad8da06f 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -611,6 +611,7 @@ defineExpose({
width: auto;
height: auto;
min-width: 0;
+ padding: 0;
&:disabled {
cursor: not-allowed;
@@ -717,7 +718,7 @@ defineExpose({
> .item {
position: relative;
- padding: 0;
+ padding: 0 3px;
width: var(--eachSize);
height: var(--eachSize);
contain: strict;
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index ee65743574..738cba2134 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:withTooltip="true"
:reaction="notification.reaction.replace(/^:(\w+):$/, ':$1@.:')"
:noStyle="true"
- style="width: 100%; height: 100%;"
+ style="width: 100%; height: 100% !important; object-fit: contain;"
/>
@@ -122,7 +122,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:withTooltip="true"
:reaction="reaction.reaction.replace(/^:(\w+):$/, ':$1@.:')"
:noStyle="true"
- style="width: 100%; height: 100%;"
+ style="width: 100%; height: 100% !important; object-fit: contain;"
/>
diff --git a/packages/frontend/src/components/MkReactionTooltip.vue b/packages/frontend/src/components/MkReactionTooltip.vue
index 15409a216a..77ca841ad0 100644
--- a/packages/frontend/src/components/MkReactionTooltip.vue
+++ b/packages/frontend/src/components/MkReactionTooltip.vue
@@ -36,6 +36,7 @@ const emit = defineEmits<{
.icon {
display: block;
width: 60px;
+ max-height: 60px;
font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
margin: 0 auto;
object-fit: contain;
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index 3dd02b261c..8038ec7429 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -63,6 +63,7 @@ function getReactionName(reaction: string): string {
.reactionIcon {
display: block;
width: 60px;
+ max-height: 60px;
font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
object-fit: contain;
margin: 0 auto;
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts b/packages/frontend/src/components/global/MkMfm.stories.impl.ts
similarity index 78%
rename from packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
rename to packages/frontend/src/components/global/MkMfm.stories.impl.ts
index 730351f795..1daf7a29cb 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkMfm.stories.impl.ts
@@ -2,16 +2,15 @@
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
-
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
import { StoryObj } from '@storybook/vue3';
import { expect, within } from '@storybook/test';
-import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.js';
+import MkMfm from './MkMfm.js';
export const Default = {
render(args) {
return {
components: {
- MkMisskeyFlavoredMarkdown,
+ MkMfm,
},
setup() {
return {
@@ -25,7 +24,7 @@ export const Default = {
};
},
},
- template: '',
+ template: '',
};
},
async play({ canvasElement, args }) {
@@ -54,25 +53,25 @@ export const Default = {
parameters: {
layout: 'centered',
},
-} satisfies StoryObj;
+} satisfies StoryObj;
export const Plain = {
...Default,
args: {
...Default.args,
plain: true,
},
-} satisfies StoryObj;
+} satisfies StoryObj;
export const Nowrap = {
...Default,
args: {
...Default.args,
nowrap: true,
},
-} satisfies StoryObj;
+} satisfies StoryObj;
export const IsNotNote = {
...Default,
args: {
...Default.args,
isNote: false,
},
-} satisfies StoryObj;
+} satisfies StoryObj;
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMfm.ts
similarity index 100%
rename from packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
rename to packages/frontend/src/components/global/MkMfm.ts
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 44d8d59941..b36625ed1b 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -5,7 +5,7 @@
import { App } from 'vue';
-import Mfm from './global/MkMisskeyFlavoredMarkdown.js';
+import Mfm from './global/MkMfm.js';
import MkA from './global/MkA.vue';
import MkAcct from './global/MkAcct.vue';
import MkAvatar from './global/MkAvatar.vue';
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index eea3f68130..4747aa5205 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -344,6 +344,7 @@ definePageMetadata(() => ({
> .img {
width: 42px;
height: 42px;
+ object-fit: contain;
}
> .body {
@@ -390,6 +391,7 @@ definePageMetadata(() => ({
> .img {
width: 32px;
height: 32px;
+ object-fit: contain;
}
> .body {