diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 0dc69ae6..df0243b3 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -77,7 +77,7 @@ const ServerList = styled.div` display: flex; overflow-y: scroll; padding-bottom: 20px; - width: 58px; + /*width: 58px;*/ flex-direction: column; scrollbar-width: none; @@ -89,6 +89,11 @@ const ServerList = styled.div` &::-webkit-scrollbar { width: 0px; } + + /*${isTouchscreenDevice && + css` + width: 58px; + `}*/ `; const ServerEntry = styled.div<{ active: boolean; home?: boolean }>` diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx index cd230593..a9f100ec 100644 --- a/src/components/navigation/left/ServerSidebar.tsx +++ b/src/components/navigation/left/ServerSidebar.tsx @@ -1,6 +1,6 @@ import { observer } from "mobx-react-lite"; import { Redirect, useParams } from "react-router"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { attachContextMenu } from "preact-context-menu"; import { useEffect } from "preact/hooks"; @@ -11,6 +11,7 @@ import PaintCounter from "../../../lib/PaintCounter"; import { dispatch } from "../../../redux"; import { connectState } from "../../../redux/connector"; import { Unreads } from "../../../redux/reducers/unreads"; +import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { useClient } from "../../../context/revoltjs/RevoltClient"; @@ -37,6 +38,13 @@ const ServerBase = styled.div` border-start-start-radius: 8px; border-end-start-radius: 8px; overflow: hidden; + + ${isTouchscreenDevice && + css` + padding-bottom: 50px; + border-end-start-radius: 0; + `} + `; const ServerList = styled.div` diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index 21d8b37b..67bb891b 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -98,9 +98,6 @@ flex-direction: row; background: var(--primary-background); - /* Scrollbox hides the scrollbar on the desktop app. */ - /*@media (hover: hover) { .scrollbox { visibility: hidden; }}*/ - .scrollbox { overflow-y: scroll; visibility: hidden; @@ -115,6 +112,7 @@ } ::-webkit-scrollbar-thumb { + width: 4px; background-clip: content-box; border-top: 80px solid transparent; } @@ -125,6 +123,7 @@ overflow-y: scroll; justify-content: flex-end; background: var(--secondary-background); + scrollbar-width: thin; .container { min-width: 218px; diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 9f14cac4..da168cff 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -467,28 +467,42 @@ .languages { .list { + display: flex; + flex-direction: column; margin-bottom: 1em; + gap: 10px; .entry { - height: 50px; + display: flex; + height: 45px; + padding: 0 8px; + background: var(--tertiary-background); + border-radius: var(--border-radius); + margin-top: 0; + + &:hover { + background: var(--secondary-background); + } } .entry > span > span { - gap: 20px; + gap: 12px; display: flex; align-items: center; flex-direction: row; .flag { display: flex; - font-size: 2.625rem; - line-height: 48px; > div { display: flex; align-items: center; justify-content: center; } + + > img { + height: 32px !important; + } } .description {