usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-19 09:02:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: prevent page jitter caused by the presence of scroll bars (#808)

Browse Source
This commit is contained in:
ChasLui 2022-12-22 17:46:09 +08:00 committed by GitHub
parent 41ad084489
commit 54702db9ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/css/tailwind.css
View File

@ -17,6 +17,11 @@
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: normal; word-break: normal;
} }
@media screen and (min-width: 1024px) {
.ml-calc {
margin-left: calc(100vw - 100%);
}
}
} }
@layer components { @layer components {

2
web/src/less/auth.less
View File

@ -2,7 +2,7 @@
@apply flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800; @apply flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800;
> .page-container { > .page-container {
@apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center; @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center ml-calc;
> .auth-form-wrapper { > .auth-form-wrapper {
@apply w-full py-4 grow flex flex-col justify-center items-center; @apply w-full py-4 grow flex flex-col justify-center items-center;

4
web/src/less/explore.less
View File

@ -5,7 +5,7 @@
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
> .page-header { > .page-header {
@apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between backdrop-blur-sm items-center px-4 sm:pr-6 pt-6 mb-2; @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between backdrop-blur-sm items-center px-4 sm:pr-6 pt-6 mb-2 ml-calc;
> .title-container { > .title-container {
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center;
@ -27,7 +27,7 @@
} }
> .memos-wrapper { > .memos-wrapper {
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6 ml-calc;
> .memo-container { > .memo-container {
@apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600; @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-600;

2
web/src/less/home.less
View File

@ -9,7 +9,7 @@
@apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start; @apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start;
> .sidebar-wrapper { > .sidebar-wrapper {
@apply flex-shrink-0; @apply flex-shrink-0 ml-calc;
} }
> .memos-wrapper { > .memos-wrapper {

4
web/src/less/memo-detail.less
View File

@ -5,7 +5,7 @@
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
> .page-header { > .page-header {
@apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 bg-zinc-100 dark:bg-zinc-800; @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2 bg-zinc-100 dark:bg-zinc-800 ml-calc;
> .title-container { > .title-container {
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center;
@ -35,7 +35,7 @@
} }
> .memos-wrapper { > .memos-wrapper {
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 ml-calc;
> .memo-container { > .memo-container {
@apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700; @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;