usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): ダイアログのお知らせが画面からはみ出ることがある問題を修正

This commit is contained in:
kakkokari-gtyih 2025-04-23 09:47:25 +09:00
parent 0a604285a0
commit ac8161c50e
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/frontend/src/components/MkAnnouncementDialog.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')" @click="onBgClick"> <MkModal ref="modal" :zPriority="'middle'" :preferType="'dialog'" @closed="$emit('closed')" @click="onBgClick">
<div ref="rootEl" :class="$style.root"> <div ref="rootEl" :class="$style.root">
<div :class="$style.header"> <div :class="$style.header">
<span :class="$style.icon"> <span :class="$style.icon">
@ -16,8 +16,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<span :class="$style.title">{{ announcement.title }}</span> <span :class="$style.title">{{ announcement.title }}</span>
</div> </div>
<div :class="$style.text"><Mfm :text="announcement.text"/></div> <div :class="$style.text"><Mfm :text="announcement.text"/></div>
<div :class="$style.footer">
<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton> <MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
</div> </div>
</div>
</MkModal> </MkModal>
</template> </template>
@ -80,9 +82,12 @@ onMounted(() => {
.root { .root {
margin: auto; margin: auto;
position: relative; position: relative;
padding: 32px; padding: 32px 32px 0;
min-width: 320px; min-width: 320px;
max-width: 480px; max-width: 480px;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box; box-sizing: border-box;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border-radius: var(--MI-radius); border-radius: var(--MI-radius);
@ -103,4 +108,13 @@ onMounted(() => {
.text { .text {
margin: 1em 0; margin: 1em 0;
} }
.footer {
position: sticky;
bottom: 0;
left: -32px;
background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.8);
margin: 0 -32px;
padding: 24px 32px;
}
</style> </style>