From 20cc028ac02af77ffff2bde19939c1c4fab37c1a Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 15 Dec 2021 13:55:31 +0000
Subject: [PATCH] ui: Fixes an issue with the version footer when scrolling
 (#11850)

---
 .changelog/11850.txt                                |  3 +++
 ui/packages/consul-ui/app/components/app/index.scss | 12 ++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 .changelog/11850.txt

diff --git a/.changelog/11850.txt b/.changelog/11850.txt
new file mode 100644
index 0000000000..2ceffcf289
--- /dev/null
+++ b/.changelog/11850.txt
@@ -0,0 +1,3 @@
+```release-note:bugfix
+ui: Fixes an issue with the version footer wandering when scrolling
+```
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index 41c9b46afe..502af95a51 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -4,9 +4,6 @@
 .app .notifications {
   @extend %app-notifications;
 }
-.app footer {
-  @extend %footer;
-}
 %app-notifications {
   display: flex;
   flex-direction: column;
@@ -31,6 +28,9 @@
   pointer-events: auto;
 }
 
+[role='contentinfo'] {
+  @extend %footer;
+}
 [role='banner'] {
   @extend %main-header-horizontal;
 }
@@ -68,7 +68,7 @@ main {
   @extend %transition-pushover;
 }
 %footer {
-  position: absolute;
+  position: fixed;
   z-index: 50;
 
   color: rgb(var(--tone-gray-400));
@@ -77,11 +77,11 @@ main {
   width: 250px;
   padding-left: 25px;
 }
-.app footer {
+%footer {
   top: calc(100vh - 42px);
   top: calc(max(100vh, 460px) - 42px);
 }
-html.has-partitions.has-nspaces .app footer {
+html.has-partitions.has-nspaces .app [role='contentinfo'] {
   top: calc(100vh - 42px);
   top: calc(max(100vh, 640px) - 42px);
 }