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

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 {

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;

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;

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 {

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;