From 4859e63a89e641d5eb9b3afb2d328fd6adb4a9b3 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 12 Feb 2021 18:14:54 +0200
Subject: [PATCH 1/3] Remove body scrollbar in chat layout, keep nav bar still
 on scroll lock, add tiny fade for media modal

---
 src/App.scss                               |  6 ++++++
 src/components/media_modal/media_modal.vue | 11 +++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index 8b91f3de..90d083bb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -586,6 +586,7 @@ nav {
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
   box-shadow: var(--topBarShadow);
+  box-sizing: border-box;
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -878,6 +879,11 @@ nav {
   overflow: hidden;
   height: 100%;
 
+  // Get rid of scrollbar on body as scrolling happens on different element
+  body {
+    overflow: hidden;
+  }
+
   // Ensures the fixed position of the mobile browser bars on scroll up / down events.
   // Prevents the mobile browser bars from overlapping or hiding the message posting form.
   @media all and (max-width: 800px) {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index ea7f7a7f..34394e7e 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -73,11 +73,22 @@
   }
 }
 
+@keyframes media-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .modal-image {
   max-width: 90%;
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
   image-orientation: from-image; // NOTE: only FF supports this
+  opacity: 1;
+  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 }
 
 .modal-view-button-arrow {

From 398aac65585cf7f743f323aa75d05646470da1d5 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 12 Feb 2021 18:47:10 +0200
Subject: [PATCH 2/3] remove redundant opacity2

---
 src/components/media_modal/media_modal.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 34394e7e..54bc5335 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -87,7 +87,6 @@
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
   image-orientation: from-image; // NOTE: only FF supports this
-  opacity: 1;
   animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 }
 

From c7018057f1df52edd2f02c4cf101e5dccf8d633c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 12 Feb 2021 18:49:57 +0200
Subject: [PATCH 3/3] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66072979..94b45a82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Fixed
 - Button to remove uploaded media in post status form is now properly placed and sized.
 - Fixed shoutbox not working in mobile layout
+- Fixed some UI jumpiness when opening images particularly in chat view
 
 
 ## [2.2.3] - 2021-01-18