Move details styling into its own component.

src/components/ui/Details.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export default styled.details`
+    summary {
+        outline: none;
+        list-style: none;
+        transition: .2s opacity;
+
+        &::marker, &::-webkit-details-marker {
+            display: none;
+        }
+
+        svg {
+            flex-shrink: 0;
+            transition: .2s ease transform;
+        }
+    }
+
+    &:not([open]) {
+        summary {
+            opacity: .7;
+        }
+        
+        summary svg {
+            transform: rotateZ(-90deg);
+        }
+    }
+`;

src/lib/TextAreaAutoSize.tsx

@@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
     const ref = useRef<HTMLTextAreaElement>();
 
     useEffect(() => {
+        if (isTouchscreenDevice) return;
         autoFocus && ref.current.focus();
     }, [value]);
     

src/pages/friends/Friend.module.scss

@@ -39,33 +39,6 @@
         }
     }
 
-    details {
-        summary {
-            outline: none;
-            list-style: none;
-            transition: .2s opacity;
-
-            &::marker, &::-webkit-details-marker {
-                display: none;
-            }
-
-            svg {
-                flex-shrink: 0;
-                transition: .2s ease transform;
-            }
-        }
-
-        &:not([open]) {
-            summary {
-                opacity: .7;
-            }
-            
-            summary svg {
-                transform: rotateZ(-90deg);
-            }
-        }
-    }
-
     &[data-empty="true"] {
         img {
             height: 120px;

src/pages/friends/Friends.tsx

@@ -14,6 +14,7 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
 import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { TextReact } from "../../lib/i18n";
 import { Children } from "../../types/Preact";
+import Details from "../../components/ui/Details";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -112,7 +113,7 @@ export default function Friends() {
                         if (list.length === 0) return;
 
                         return (
-                            <details open>
+                            <Details open>
                                 <summary>
                                     <Overline className={styles.overline} type="subtle">
                                         <ChevronDown size={20} />
@@ -122,7 +123,7 @@ export default function Friends() {
                                     </Overline>
                                 </summary>
                                 { list.map(x => <Friend key={x._id} user={x} />) }
-                            </details>
+                            </Details>
                         )
                     })
                 }