From b26e0dcf357890c0d5391349045558befa934486 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Mon, 23 Jan 2023 07:14:23 -0600
Subject: [PATCH] UX: Set penalty history to sticky (#19933)

---
 .../templates/modal/admin-penalize-user.hbs   |  2 +-
 .../stylesheets/common/admin/penalty.scss     | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-penalize-user.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-penalize-user.hbs
index 1303d01d808..ea8ae78a8f2 100644
--- a/app/assets/javascripts/admin/addon/templates/modal/admin-penalize-user.hbs
+++ b/app/assets/javascripts/admin/addon/templates/modal/admin-penalize-user.hbs
@@ -57,7 +57,6 @@
         />
       {{/if}}
 
-      <div class="penalty-history">{{html-safe this.penaltyHistory}}</div>
     {{else}}
       {{#if (eq this.penaltyType "suspend")}}
         <div class="cant-suspend">{{i18n "admin.user.cant_suspend"}}</div>
@@ -65,6 +64,7 @@
         <div class="cant-silence">{{i18n "admin.user.cant_silence"}}</div>
       {{/if}}
     {{/if}}
+    <div class="penalty-history">{{html-safe this.penaltyHistory}}</div>
   </ConditionalLoadingSpinner>
 </DModalBody>
 
diff --git a/app/assets/stylesheets/common/admin/penalty.scss b/app/assets/stylesheets/common/admin/penalty.scss
index 6e846748c7a..4505a89a4ce 100644
--- a/app/assets/stylesheets/common/admin/penalty.scss
+++ b/app/assets/stylesheets/common/admin/penalty.scss
@@ -1,5 +1,8 @@
 .silence-user-modal,
 .suspend-user-modal {
+  .modal-body {
+    padding-bottom: 0em;
+  }
   .penalty-duration,
   .penalty-suspend-forever,
   .suspend-reason-title,
@@ -87,4 +90,24 @@
       }
     }
   }
+  .penalty-history {
+    position: sticky;
+    bottom: 0;
+    background-color: var(--secondary);
+    padding: 0.5em 0 1em 0;
+  }
+  .penalty-history::before {
+    position: absolute;
+    content: "";
+    display: block;
+    height: 1.5em;
+    top: -1.5em;
+    width: 100%;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--secondary-rgb), 0),
+      rgba(var(--secondary-rgb), 1)
+    );
+  }
 }