diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index bda683002d..a2e95fb690 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<component
:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
:title="url"
+ @click.stop
>
<slot></slot>
<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg" :class="$style.icon"></i>
diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index a52f2a0e05..dc76d2bcdb 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -32,6 +32,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
<div :class="[$style.controlsChild, $style.controlsRight]">
+ <a class="_button" :class="$style.controlButton" :href="audio.url" :download="audio.name" target="_blank">
+ <i class="ph-download ph-bold ph-lg"></i>
+ </a>
<button class="_button" :class="$style.controlButton" @click="showMenu">
<i class="ph-gear ph-bold ph-lg"></i>
</button>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 3b8d43c85b..b2609193fa 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -51,8 +51,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
<div :class="[$style.controlsChild, $style.controlsRight]">
+ <a class="_button" :class="$style.controlButton" :href="video.url" :download="video.name" target="_blank">
+ <i class="ph-download ph-bold ph-lg"></i>
+ </a>
<button class="_button" :class="$style.controlButton" @click="showMenu">
- <i class="ph-settings ph-bold ph-lg"></i>
+ <i class="ph-gear ph-bold ph-lg"></i>
</button>
<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
<i v-if="isFullscreen" class="ph-arrows-in ph-bold ph-lg"></i>
@@ -427,7 +430,6 @@ onDeactivated(() => {
display: block;
height: 100%;
width: 100%;
- pointer-events: none;
}
.videoOverlayPlayButton {
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 4d42053657..8aeacd361e 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -51,6 +51,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
padding: 4px 8px 4px 4px;
border-radius: var(--radius-ellipse);
color: var(--mention);
+ white-space: nowrap;
&.isMe {
color: var(--mentionMe);
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index bdad1fc1fe..fa35c59aaf 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
- <div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
+ <div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click.stop="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<MkNoteHeader :note="appearNote" :mini="true" @click.stop/>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
<div style="container-type: inline-size;">
@@ -854,12 +854,13 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
- width: max-content;
- min-width: min-content;
- max-width: fit-content;
+ max-width: 400px;
}
&:hover > .article > .main > .footer > .footerButton {
@@ -1278,5 +1279,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.clickToOpen {
cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
}
</style>
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 7a6109ee0b..e4c90acdd2 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
</p>
<div v-show="note.cw == null || showContent">
- <MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note"/>
+ <MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
</div>
</div>
</div>
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 6deb1b855d..bb30fe53cf 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
</p>
<div v-show="note.cw == null || showContent">
- <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/>
+ <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
<footer :class="$style.footer">
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 038f5aa30d..c4daf3403f 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
- <div :class="{ [$style.clickToOpen]: defaultStore.state.clickToOpen }" @click="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined">
+ <div :class="{ [$style.clickToOpen]: defaultStore.state.clickToOpen }" @click.stop="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined">
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deletedNote }})</span>
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`" @click.stop><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
@@ -29,17 +29,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<summary>{{ i18n.ts.poll }}</summary>
<MkPoll :noteId="note.id" :poll="note.poll"/>
</details>
- <button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
+ <button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click.stop="collapsed = false">
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
</button>
- <button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
+ <button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click.stop="collapsed = true">
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
</button>
</div>
</template>
<script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
import * as Misskey from 'misskey-js';
import * as mfm from '@transfem-org/sfm-js';
import MkMediaList from '@/components/MkMediaList.vue';
@@ -57,6 +57,7 @@ const props = defineProps<{
translating?: boolean;
translation?: any;
hideFiles?: boolean;
+ expandAllCws?: boolean;
}>();
const router = useRouter();
@@ -87,6 +88,10 @@ function animatedMFM() {
}
const collapsed = ref(isLong);
+
+watch(() => props.expandAllCws, (expandAllCws) => {
+ if (expandAllCws) collapsed.value = false;
+});
</script>
<style lang="scss" module>
@@ -165,5 +170,6 @@ const collapsed = ref(isLong);
.clickToOpen {
cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
}
</style>
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 4e224d2e6d..0bad3fd61d 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<SkNoteHeader :note="appearNote" :mini="true"/>
</div>
</div>
- <div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
+ <div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click.stop="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<div style="container-type: inline-size;">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
@@ -855,12 +855,13 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
- width: max-content;
- min-width: min-content;
- max-width: fit-content;
+ max-width: 400px;
}
&:hover > .article > .main > .footer > .footerButton {
@@ -1312,5 +1313,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.clickToOpen {
cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
}
</style>
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index d26e431c95..d88c779974 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -40,9 +40,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="appearNote.reply && appearNote.reply.replyId">
- <SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
+ <SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws" detailed/>
</template>
- <SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
+ <SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" detailed/>
<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
<header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
@@ -112,16 +112,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
</div>
- <footer :class="$style.footer">
- <div :class="$style.noteFooterInfo">
- <div v-if="appearNote.updatedAt">
- {{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
- </div>
- <MkA :to="notePage(appearNote)">
- <MkTime :time="appearNote.createdAt" mode="detail" colored/>
- </MkA>
+ <div :class="$style.noteFooterInfo">
+ <div v-if="appearNote.updatedAt">
+ {{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
</div>
- <MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+ <MkA :to="notePage(appearNote)">
+ <MkTime :time="appearNote.createdAt" mode="detail" colored/>
+ </MkA>
+ </div>
+ <MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+ <footer :class="$style.footer">
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.repliesCount }}</p>
@@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
- <SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+ <SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="true"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -195,7 +195,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!quotesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
</div>
- <SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
+ <SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true"/>
</div>
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
<div :class="$style.reactionTabs">
@@ -836,12 +836,13 @@ onUnmounted(() => {
}
.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
- width: max-content;
- min-width: min-content;
- max-width: fit-content;
+ max-width: 400px;
}
.replyTo {
@@ -849,7 +850,7 @@ onUnmounted(() => {
}
.replyToMore {
-
+
}
.renote {
@@ -1081,10 +1082,17 @@ onUnmounted(() => {
}
.tab {
+ display: flex;
+ align-items: center;
+ justify-content: center;
flex: 1;
padding: 12px 8px;
border-top: solid 2px transparent;
border-bottom: solid 2px transparent;
+
+ > i {
+ margin-right: 8px;
+ }
}
.tabActive {
diff --git a/packages/frontend/src/components/SkNoteSimple.vue b/packages/frontend/src/components/SkNoteSimple.vue
index fe12baedeb..533aa60961 100644
--- a/packages/frontend/src/components/SkNoteSimple.vue
+++ b/packages/frontend/src/components/SkNoteSimple.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
</p>
<div v-show="note.cw == null || showContent">
- <MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note"/>
+ <MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
</div>
</div>
</div>
@@ -48,6 +48,11 @@ watch(() => props.expandAllCws, (expandAllCws) => {
margin: 0;
padding: 0;
font-size: 0.95em;
+
+ &:hover, &:focus-within {
+ background: var(--panelHighlight);
+ transition: background .2s;
+ }
}
.avatar {
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 363dcef348..6eec2da57d 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
+<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.isReply]: props.isReply, [$style.detailed]: props.detailed }]">
<div v-if="!hideLine" :class="$style.line"></div>
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@@ -24,11 +24,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
</p>
<div v-show="note.cw == null || showContent">
- <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/>
+ <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
+ <MkReactionsViewer ref="reactionsViewer" :note="note"/>
<footer :class="$style.footer">
- <MkReactionsViewer ref="reactionsViewer" :note="note"/>
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < numberOfReplies">
- <SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+ <SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="props.isReply"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@@ -125,8 +125,13 @@ const props = withDefaults(defineProps<{
// how many notes are in between this one and the note being viewed in detail
depth?: number;
+
+ isReply?: boolean;
+ detailed?: boolean;
}>(), {
depth: 1,
+ isReply: false,
+ detailed: false,
});
const el = shallowRef<HTMLElement>();
@@ -439,7 +444,12 @@ if (props.detail) {
--reply-indent: calc(.5 * var(--avatar));
&.children {
- padding: 10px 0 0 16px;
+ padding: 10px 0 0 8px;
+ }
+
+ &.isReply {
+ /* @link https://utopia.fyi/clamp/calculator?a=450,580,26—36 */
+ --avatar: clamp(26px, -8.6154px + 7.6923cqi, 36px);
}
}
@@ -453,19 +463,20 @@ if (props.detail) {
}
.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
- width: max-content;
- min-width: min-content;
- max-width: fit-content;
+ max-width: 400px;
}
.main {
position: relative;
display: flex;
- &::after {
+ :is(.detailed, .replyRoot) &::after {
content: "";
position: absolute;
top: -12px;
@@ -478,9 +489,9 @@ if (props.detail) {
transition: opacity .2s, background .2s;
z-index: -1;
}
-
- &:hover::after,
- &:focus-within::after {
+
+ :is(.detailed, .replyRoot) &:hover::after,
+ :is(.detailed, .replyRoot) &:focus-within::after {
opacity: 1;
}
}
@@ -528,10 +539,6 @@ if (props.detail) {
padding-top: 10px;
opacity: 0.7;
- &:not(:last-child) {
- margin-right: 1.5em;
- }
-
&:hover {
color: var(--fgHighlighted);
}
@@ -610,10 +617,6 @@ if (props.detail) {
@container (max-width: 480px) {
.root {
padding: 22px 24px;
-
- &.children {
- padding: 10px 0 0 8px;
- }
}
.line {
@@ -683,35 +686,4 @@ if (props.detail) {
border-bottom: unset;
}
}
-
-@container (max-width: 580px) {
- .threadLine, .reply {
- margin-left: 25px;
- }
- .reply::before {
- height: 45px;
- }
- .single::before {
- left: 25px;
- }
- .single {
- margin-left: 0;
- }
-}
-
-@container (max-width: 450px) {
- .threadLine, .reply {
- margin-left: 23px;
- }
- .reply::before {
- height: 43px;
- }
- .single::before {
- left: 23px;
- width: 9px;
- }
- .single {
- margin-left: 0;
- }
-}
</style>
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
index 667a113432..552253d35e 100644
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<component
:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target"
@contextmenu.stop="() => {}"
+ @click.stop
>
<template v-if="!self">
<span :class="$style.schema">{{ schema }}//</span>
diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
index ec9110ecff..68866b36e1 100644
--- a/packages/frontend/src/index.html
+++ b/packages/frontend/src/index.html
@@ -27,10 +27,11 @@
/>
<meta property="og:site_name" content="[DEV BUILD] Misskey" />
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="theme-color-orig" content="#86b300">
</head>
<body>
-<div id="misskey_app"></div>
+<div id="sharkey_app"></div>
<script type="module" src="./_dev_boot_.ts"></script>
</body>
</html>
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 46f88825b8..bc43d85376 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -253,6 +253,10 @@ rt {
line-height: inherit;
max-width: 100%;
+ &:hover {
+ text-decoration: none;
+ }
+
&:focus-visible {
outline: none;
}