fix(app): fixed broken scrollbar on mobile

This commit is contained in:
trashtemp 2021-12-30 14:37:56 +01:00
parent c0bf3fbc0b
commit fdbd931ea7
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
3 changed files with 7 additions and 13 deletions

View file

@ -15,12 +15,6 @@ export default styled.div`
max(var(--min-opacity), 0.75) max(var(--min-opacity), 0.75)
); );
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
/*> * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 48px solid transparent;
}*/
`; `;
export const GenericSidebarBase = styled.div<{ export const GenericSidebarBase = styled.div<{

View file

@ -1,6 +1,6 @@
import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels"; import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
import { Switch, Route, useLocation } from "react-router-dom"; import { Switch, Route, useLocation } from "react-router-dom";
import styled from "styled-components"; import styled, { css } from "styled-components";
import ContextMenus from "../lib/ContextMenus"; import ContextMenus from "../lib/ContextMenus";
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
@ -56,6 +56,12 @@ const Routes = styled.div`
max(var(--min-opacity), 0.75) max(var(--min-opacity), 0.75)
);*/ );*/
//backdrop-filter: blur(10px); //backdrop-filter: blur(10px);
${() =>
isTouchscreenDevice &&
css`
overflow: hidden;
`}
`; `;
export default function App() { export default function App() {

View file

@ -42,12 +42,6 @@ const Area = styled.div`
padding-top: 48px; padding-top: 48px;
word-break: break-word; word-break: break-word;
> * > ::-webkit-scrollbar-thumb {
width: 4px;
background-clip: content-box;
border-top: 80px solid transparent;
}
> div { > div {
display: flex; display: flex;
min-height: 100%; min-height: 100%;