Update XMessage.vue

locales/index.d.ts

@@ -10142,7 +10142,7 @@ export interface Locale extends ILocale {
          */
         "introduction": string;
         /**
-         * 画面の右にある + を押して、いつでもカラムを追加できます。
+         * カラムを追加するには、画面の + をクリックします。
          */
         "introduction2": string;
         /**

locales/ja-JP.yml

@@ -2681,7 +2681,7 @@ _deck:
   newProfile: "新規プロファイル"
   deleteProfile: "プロファイルを削除"
   introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
-  introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
+  introduction2: "カラムを追加するには、画面の + をクリックします。"
   widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
   useSimpleUiForNonRootPages: "非ルートページは簡易UIで表示"
   usedAsMinWidthWhenFlexible: "「幅を自動調整」が有効の場合、これが幅の最小値となります"

packages/frontend/src/components/MkFukidashi.vue

@@ -19,18 +19,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
 			</g>
 		</svg>
-		<div
+		<div :class="$style.content">
-			:class="[$style.content, {
-				[$style.contentBgPanel]: contentBgPanel,
-				[$style.small]: small,
-			}]"
-		>
-			<div :class="$style.contentInner">
 			<slot></slot>
 		</div>
 	</div>
 </div>
-</div>
 </template>
 
 <script setup lang="ts">
@@ -39,15 +32,11 @@ withDefaults(defineProps<{
 	negativeMargin?: boolean;
 	shadow?: boolean;
 	accented?: boolean;
-	contentBgPanel?: boolean;
-	small?: boolean;
 }>(), {
 	tail: 'right',
 	negativeMargin: false,
 	shadow: false,
 	accented: false,
-	contentBgPanel: false,
-	small: false,
 });
 </script>
 
@@ -62,7 +51,7 @@ withDefaults(defineProps<{
 	padding-top: calc(var(--fukidashi-radius) * .13);
 
 	&.accented {
-		--fukidashi-bg: var(--MI_THEME-accent);
+		--fukidashi-bg: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-panel) 85%);
 	}
 
 	&.shadow {
@@ -96,28 +85,14 @@ withDefaults(defineProps<{
 .content {
 	position: relative;
 	padding: 10px 14px;
-
-	&.small {
-		padding: 6px 10px;
 }
 
-	&.contentBgPanel::before {
+@container (max-width: 450px) {
-		content: '';
+	.content {
-		position: absolute;
+		padding: 8px 12px;
-		top: 2px;
-		left: 2px;
-		width: calc(100% - 4px);
-		height: calc(100% - 4px);
-		background: var(--MI_THEME-panel);
-		border-radius: calc(var(--fukidashi-radius) - 2px);
 	}
 }
 
-.contentInner {
-	position: relative;
-	z-index: 1;
-}
-
 .tail {
 	position: absolute;
 	top: 0;

packages/frontend/src/pages/chat/XMessage.vue

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
-	<MkAvatar v-if="!isMe" :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
+	<MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
 	<div :class="$style.body" @contextmenu.stop="onContextmenu">
-		<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
+		<div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName']" :user="message.fromUser"/></div>
-		<MkFukidashi :tail="isMe ? 'right' : 'left'" :accented="isMe" negativeMargin contentBgPanel small>
+		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
 			<div v-if="!message.isDeleted" :class="$style.content">
 				<Mfm
 					v-if="message.text"
@@ -226,17 +226,35 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 	position: sticky;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	display: block;
-	width: 32px;
+	width: 50px;
-	height: 32px;
+	height: 50px;
+}
+
+@container (max-width: 450px) {
+	.root {
+		&.isMe {
+			.avatar {
+				display: none;
+			}
+		}
+	}
+
+	.avatar {
+		width: 42px;
+		height: 42px;
+	}
+
+	.fukidashi {
+		font-size: 90%;
+	}
 }
 
 .body {
-	padding-top: 4px;
 	margin: 0 12px;
-	box-sizing: border-box;
 }
 
 .header {
+	min-height: 4px; // fukidashiの位置調整も兼ねるため
 	font-size: 80%;
 }
 

packages/frontend/src/ui/deck.vue

@@ -35,7 +35,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</section>
 				<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
 					<div>{{ i18n.ts._deck.introduction }}</div>
-					<MkButton primary style="margin: 1em auto;" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
 					<div>{{ i18n.ts._deck.introduction2 }}</div>
 				</div>
 			</div>