fix(client): fix tabs of page header behaviour

CHANGELOG.md

@@ -10,11 +10,13 @@
 ## 12.x.x (unreleased)
 
 ### Improvements
-- アニメーションを減らす設定をメニューのアニメーションにも適用するように
+- クライアント: アニメーションを減らす設定をメニューのアニメーションにも適用するように
 
 ### Bugfixes
 - Fix createDeleteAccountJob
 - admin inbox queue does not show individual jobs
+- クライアント: ヘッダーのタブが折り返される問題を修正
+- クライアント: ヘッダーにタブが表示されている状態でタイトルをクリックしたときにタブ選択が表示されるのを修正
 
 ## 12.91.0 (2021/09/22)
 

src/client/ui/_common_/header.vue

@@ -141,6 +141,7 @@ export default defineComponent({
 
 		showTabsPopup(ev) {
 			if (!this.hasTabs) return;
+			if (!this.narrow) return;
 			ev.preventDefault();
 			ev.stopPropagation();
 			const menu = this.info.tabs.map(tab => ({
@@ -218,6 +219,7 @@ export default defineComponent({
 		white-space: nowrap;
 		text-align: left;
 		font-weight: bold;
+		flex-shrink: 0;
 
 		> .avatar {
 			$size: 32px;
@@ -263,6 +265,8 @@ export default defineComponent({
 	> .tabs {
 		margin-left: 16px;
 		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
 
 		> .tab {
 			display: inline-block;