From 2c1a67056f36db390c44749bc3f7abcc2d41e723 Mon Sep 17 00:00:00 2001
From: Xiphe <github@xiphe.net>
Date: Fri, 8 Jan 2021 13:15:16 +0100
Subject: [PATCH] fix: prevent UI jumps when scrolling to a month with bigger
 header

previously when body was higher then window and a bigger header scrolled into view
the UI somtimes jumped back to where the scrolling started

solved by adding a "counter-balance" to be buttom of the screen that
will shrink the same value that the header grows so that the vertical
scroll size does not change while scrolling

my brain hurts
---
 src/views/CategorySidebar/CategorySidebar.module.scss | 3 ++-
 src/views/Month/Month.module.scss                     | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/CategorySidebar/CategorySidebar.module.scss b/src/views/CategorySidebar/CategorySidebar.module.scss
index db847ac..c9759fd 100644
--- a/src/views/CategorySidebar/CategorySidebar.module.scss
+++ b/src/views/CategorySidebar/CategorySidebar.module.scss
@@ -39,7 +39,8 @@
 .categorySidebar {
   border-right: none;
   height: calc(100% - var(--month-header-height));
-  transition: height 200ms ease-out;
+  padding-bottom: calc(300px - var(--month-header-height));
+  transition: height, padding 200ms ease-out;
   overflow-y: scroll;
   &::-webkit-scrollbar {
     display: none;
diff --git a/src/views/Month/Month.module.scss b/src/views/Month/Month.module.scss
index 9b97857..dcfcbdf 100644
--- a/src/views/Month/Month.module.scss
+++ b/src/views/Month/Month.module.scss
@@ -18,6 +18,8 @@
 .monthInner {
   min-height: 100%;
   border-right: 1px solid var(--element-border-color);
+  padding-bottom: calc(300px - var(--month-header-height));
+  transition: padding 200ms ease-out;
 }
 .title {
   text-align: center;