diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index 05b941a6..747a24fa 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -29,6 +29,11 @@ export default styled.div` flex-shrink: 0; } + @media only screen and (max-width: 768px) { + padding: 0 12px; + } + + ${ props => props.background && css` height: 120px; align-items: flex-end; diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss index 1db3b2d7..ab28639b 100644 --- a/src/pages/friends/Friend.module.scss +++ b/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. diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx index c59bb9c8..343a9fc0 100644 --- a/src/pages/friends/Friends.tsx +++ b/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 ( <>
+ { !isTouchscreenDevice && }
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx index e32c7939..151a6ada 100644 --- a/src/pages/settings/GenericSettings.tsx +++ b/src/pages/settings/GenericSettings.tsx @@ -65,7 +65,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children, ) : ( <> switchPage()}> - +