From 8660c6d2a7cfb0826d3643b206fed895005604cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=95=E3=81=AA=E3=81=97=E6=B2=BC=E3=81=AE=E9=AD=94?=
 =?UTF-8?q?=E5=A5=B3?= <megablacklabel@gmail.com>
Date: Thu, 2 Jul 2026 23:19:29 +0900
Subject: [PATCH] fix(titlebar): use !important on touch-action instead of
 inline style

The inline style approach broke the title bar design on mobile.
Using !important in CSS achieves the same effect (preventing
the browser from stealing touch events) without interfering
with the component's style prop merging.
---
 src/components/window/TitleBar.module.css | 2 +-
 src/components/window/TitleBar.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/window/TitleBar.module.css b/src/components/window/TitleBar.module.css
index e783c97..0be491b 100644
--- a/src/components/window/TitleBar.module.css
+++ b/src/components/window/TitleBar.module.css
@@ -3,7 +3,7 @@
   padding: 2px 2px 2px 3px !important;
   align-items: center !important;
   cursor: move !important;
-  touch-action: none;
+  touch-action: none !important;
 }
 
 .titleBar:global(.inactive) {
diff --git a/src/components/window/TitleBar.tsx b/src/components/window/TitleBar.tsx
index 9474e74..2fb46ae 100644
--- a/src/components/window/TitleBar.tsx
+++ b/src/components/window/TitleBar.tsx
@@ -35,7 +35,7 @@ export const TitleBar = forwardRef<HTMLDivElement, TitleBarProps>(function Title
   ref,
 ) {
   return (
-    <div ref={ref} className={clsx('title-bar', styles.titleBar, { inactive }, className)} {...rest} style={{ ...(rest.style as React.CSSProperties), touchAction: 'none' }}>
+    <div ref={ref} className={clsx('title-bar', styles.titleBar, { inactive }, className)} {...rest}>
       <div className={styles.titleBarLeft}>
         {icon && (
           <img src={icon} alt="" style={{ width: 14, height: 14, flexShrink: 0 }} />