make title selectable

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',
           }}
           >

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>

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;