From 5f87385486eed08571fb7e15da92d76919f27b60 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Sat, 14 Dec 2024 10:34:28 +0300
Subject: [PATCH] make title selectable

---
 src/react/AppStatus.tsx | 2 +-
 src/react/Screen.tsx    | 5 +++--
 src/styles.css          | 4 ++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/react/AppStatus.tsx b/src/react/AppStatus.tsx
index f9e5217ed..2c24b1539 100644
--- a/src/react/AppStatus.tsx
+++ b/src/react/AppStatus.tsx
@@ -38,10 +38,10 @@ export default ({
   return (
     <Screen
       className='small-content'
+      titleSelectable={isError}
       title={
         <>
           <span style={{
-            userSelect: isError ? 'text' : undefined,
             wordBreak: 'break-word',
           }}
           >
diff --git a/src/react/Screen.tsx b/src/react/Screen.tsx
index c80b880ac..6654e4ddf 100644
--- a/src/react/Screen.tsx
+++ b/src/react/Screen.tsx
@@ -4,15 +4,16 @@ interface Props {
   backdrop?: boolean | 'dirt'
   style?: React.CSSProperties
   className?: string
+  titleSelectable?: boolean
 }
 
-export default ({ title, children, backdrop = true, style, className }: Props) => {
+export default ({ title, children, backdrop = true, style, className, titleSelectable }: Props) => {
   return (
     <>
       {backdrop === 'dirt' ? <div className='dirt-bg' /> : backdrop ? <div className="backdrop" /> : null}
       <div className={`fullscreen ${className}`} style={{ overflow: 'auto', ...style }}>
         <div className="screen-content">
-          <div className="screen-title">{title}</div>
+          <div className={`screen-title ${titleSelectable ? 'text-select' : ''}`}>{title}</div>
           {children}
         </div>
       </div>
diff --git a/src/styles.css b/src/styles.css
index 1e5407f60..2c645ae92 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -181,6 +181,10 @@ body::xr-overlay #viewer-canvas {
   color: #999;
 }
 
+.text-select {
+  user-select: text;
+}
+
 @media screen and (min-width: 430px) {
   .span-2 {
     grid-column: span 2;