From 75ab688a36b3d939fae708f2d450b555516a7e60 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 09:50:47 +0900
Subject: [PATCH] added to navbar

---
 .../directives/flip-on-device-orientation.ts  |  6 +++---
 packages/frontend/src/pages/qr.show.vue       | 19 +++++++------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/directives/flip-on-device-orientation.ts b/packages/frontend/src/directives/flip-on-device-orientation.ts
index 234ba93c1d..134482c1c2 100644
--- a/packages/frontend/src/directives/flip-on-device-orientation.ts
+++ b/packages/frontend/src/directives/flip-on-device-orientation.ts
@@ -2,14 +2,14 @@ import type { Directive } from 'vue';
 
 let initialized = false;
 let styleEl: HTMLStyleElement | null = null;
-const canUseDeviceOrientation = !window.DeviceOrientationEvent;
+const canUseDeviceOrientation = !!window.DeviceOrientationEvent;
 const className = '_flipOnDeviceOrientation';
 const variableName = `--MI-flip_on_device_orientation_transform`;
 
 function handleOrientationChange(event: DeviceOrientationEvent) {
-	const isUpsideDown = event.beta ? event.beta < -15 : false;
+	const isUpsideDown = event.beta ? event.beta < 5 : false;
 	const transform = isUpsideDown ? 'scale(-1, -1)' : '';
-	window.document.body.style.setProperty(variableName, transform);
+	window.document.documentElement.style.setProperty(variableName, transform);
 }
 
 function registerListener() {
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 26e0b71b15..5e8063fa1a 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -170,7 +170,6 @@ $avatarSize: 58px;
 .avatar {
 	width: $avatarSize;
 	height: $avatarSize;
-	margin-right: 8px;
 }
 
 .names {
@@ -179,10 +178,12 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin-top: -4px;
+	margin: -4px -2px 0 8px;
+	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;
 	overflow-y: visible;
+	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
 }
 
 .name {
@@ -191,11 +192,8 @@ $avatarSize: 58px;
 	font-size: 20px;
 	line-height: 24px;
 	width: fit-content;
-	max-width: calc(100% - 16px);
-	overflow-x: hidden;
-	overflow-y: visible;
-	padding-right: 16px;
-	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+	max-width: 100%;
+	overflow: visible;
 }
 
 .username {
@@ -204,11 +202,8 @@ $avatarSize: 58px;
 	font-size: 14px;
 	line-height: 16px;
 	width: fit-content;
-	max-width: calc(100% - 16px);
-	overflow-x: hidden;
-	overflow-y: visible;
-	padding-right: 16px;
-	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+	max-width: 100%;
+	overflow: visible;
 }
 
 .logo {