diff --git a/src/components/ui/Details.tsx b/src/components/ui/Details.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8bf47059c2c4e544ea6ddddbdb36fddc1066be55
--- /dev/null
+++ b/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);
+        }
+    }
+`;
diff --git a/src/lib/TextAreaAutoSize.tsx b/src/lib/TextAreaAutoSize.tsx
index bfc515b071a8dd63f5f3f3709f4c74e0b431368a..c602655489632aa84eee5c96aff38d16dbccb220 100644
--- a/src/lib/TextAreaAutoSize.tsx
+++ b/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]);
     
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index af867b28721f6907074ed08681c09a4df44e6bed..fe103bf7e83196b9b54759c5a1827d0d65746975 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/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;
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 7ccf4761974ea253b10efd86f61e4568703f2eaf..607f6d8f7b93ad784fd887b6c3f5887b7f7f15d1 100644
--- a/src/pages/friends/Friends.tsx
+++ b/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>
                         )
                     })
                 }