cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-26 23:42:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(settings): fixed mobile settings padding

Browse source
This commit is contained in:
trashtemp 2022-01-04 19:49:37 +01:00
parent dbf681c2e9
commit 62b7ba2e4d
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/pages/settings/GenericSettings.tsx
View file

@ -132,7 +132,11 @@ export function GenericSettings({
)} )}
{(!isTouchscreenDevice || typeof page === "undefined") && ( {(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div className={styles.scrollbox}> <div
className={styles.scrollbox}
data-scroll-offset={
isTouchscreenDevice ? "with-padding" : undefined
}>
<div className={styles.container}> <div className={styles.container}>
{isTouchscreenDevice && indexHeader} {isTouchscreenDevice && indexHeader}
{pages.map((entry, i) => {pages.map((entry, i) =>

17
src/pages/settings/Settings.module.scss
View file

@ -38,6 +38,14 @@
flex-direction: column; flex-direction: column;
background: var(--primary-header); background: var(--primary-header);
::-webkit-scrollbar-thumb {
min-height: 100px;
width: 4px;
background-clip: content-box;
border-top: var(--header-height) solid transparent;
border-bottom: var(--bottom-navigation-height) solid transparent;
}
.sidebar, .sidebar,
.content { .content {
background: var(--primary-background); background: var(--primary-background);
@ -48,8 +56,7 @@
overflow-y: auto; overflow-y: auto;
.container { .container {
padding: calc(var(--header-height) + 4px) 8px padding: 20px 10px 80px;
calc(var(--bottom-navigation-height) + 30px);
min-width: 218px; min-width: 218px;
} }
@ -63,7 +70,9 @@
/* Content */ /* Content */
.content { .content {
padding: 0; ::-webkit-scrollbar-thumb {
border-bottom: none;
}
.scrollbox { .scrollbox {
overflow: auto; overflow: auto;
@ -71,7 +80,7 @@
.contentcontainer { .contentcontainer {
max-width: unset !important; max-width: unset !important;
padding: 72px 12px var(--bottom-navigation-height) !important; padding: 20px 10px 80px;
} }
} }
} }