From 54702db9bacf7109fc333aa4ec9b5edfdf306918 Mon Sep 17 00:00:00 2001 From: ChasLui Date: Thu, 22 Dec 2022 17:46:09 +0800 Subject: [PATCH] feat: prevent page jitter caused by the presence of scroll bars (#808) --- web/src/css/tailwind.css | 5 +++++ web/src/less/auth.less | 2 +- web/src/less/explore.less | 4 ++-- web/src/less/home.less | 2 +- web/src/less/memo-detail.less | 4 ++-- 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/web/src/css/tailwind.css b/web/src/css/tailwind.css index c2b773f2..9f63d6e3 100644 --- a/web/src/css/tailwind.css +++ b/web/src/css/tailwind.css @@ -17,6 +17,11 @@ overflow-wrap: anywhere; word-break: normal; } + @media screen and (min-width: 1024px) { + .ml-calc { + margin-left: calc(100vw - 100%); + } + } } @layer components { diff --git a/web/src/less/auth.less b/web/src/less/auth.less index e1bf5767..e6f0fa19 100644 --- a/web/src/less/auth.less +++ b/web/src/less/auth.less @@ -2,7 +2,7 @@ @apply flex flex-row justify-center items-center w-full h-screen bg-zinc-100 dark:bg-zinc-800; > .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 { @apply w-full py-4 grow flex flex-col justify-center items-center; diff --git a/web/src/less/explore.less b/web/src/less/explore.less index ceb8744f..536e6f6b 100644 --- a/web/src/less/explore.less +++ b/web/src/less/explore.less @@ -5,7 +5,7 @@ @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; > .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 { @apply flex flex-row justify-start items-center; @@ -27,7 +27,7 @@ } > .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 { @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; diff --git a/web/src/less/home.less b/web/src/less/home.less index 5843104a..8cdd6b9c 100644 --- a/web/src/less/home.less +++ b/web/src/less/home.less @@ -9,7 +9,7 @@ @apply relative w-full min-h-screen mx-auto flex flex-row justify-start sm:justify-center items-start; > .sidebar-wrapper { - @apply flex-shrink-0; + @apply flex-shrink-0 ml-calc; } > .memos-wrapper { diff --git a/web/src/less/memo-detail.less b/web/src/less/memo-detail.less index 025b8805..0015a57f 100644 --- a/web/src/less/memo-detail.less +++ b/web/src/less/memo-detail.less @@ -5,7 +5,7 @@ @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; > .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 { @apply flex flex-row justify-start items-center; @@ -35,7 +35,7 @@ } > .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 { @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;