Fix: small fixes for mobile

src/components/ui/Header.tsx

@@ -29,6 +29,11 @@ export default styled.div<Props>`
         flex-shrink: 0;
     }
 
+    @media only screen and (max-width: 768px) {
+        padding: 0 12px;
+    }
+    
+
     ${ props => props.background && css`
         height: 120px;
         align-items: flex-end;

src/pages/friends/Friend.module.scss

@@ -87,6 +87,13 @@
     }
 }
 
+@media only screen and (max-width: 768px) {
+    .list {
+        padding: 0 12px 12px 12px;
+    }
+}
+
+
 //! FIXME: Move this to the Header component, do this:
 // 1. Check if header has topic, if yes, flex-grow: 0 on the title.
 // 2. If header has no topic (example: friends page), flex-grow 1 on the header title.

src/pages/friends/Friends.tsx

@@ -1,5 +1,5 @@
 import styles from "./Friend.module.scss";
-import { Conversation, UserPlus } from "@styled-icons/boxicons-solid";
+import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
 
 import { Friend } from "./Friend";
 import { Text } from "preact-i18n";
@@ -8,6 +8,7 @@ import Overline from "../../components/ui/Overline";
 import IconButton from "../../components/ui/IconButton";
 import { useUsers } from "../../context/revoltjs/hooks";
 import { User, Users } from "revolt.js/dist/api/objects";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
 export default function Friends() {
@@ -31,6 +32,7 @@ export default function Friends() {
     return (
         <>
             <Header placement="primary">
+                { !isTouchscreenDevice && <UserDetail size={24} /> }
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>

src/pages/settings/GenericSettings.tsx

@@ -65,7 +65,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
                     ) : (
                         <>
                             <IconButton onClick={() => switchPage()}>
-                                <LeftArrowAlt size={24} />
+                                <LeftArrowAlt size={30} />
                             </IconButton>
                             <Text
                                 id={`app.settings.${category}.${page}.title`}