From 15e2d13589c4064f5b8f44f71746eb2c105f9b17 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Thu, 18 Feb 2021 10:55:50 +0100
Subject: [PATCH] fix(helpers): add styling improvements for sb action logger

---
 .changeset/violet-buttons-rescue.md                     | 5 +++++
 packages/helpers/sb-action-logger/src/SbActionLogger.js | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/violet-buttons-rescue.md

diff --git a/.changeset/violet-buttons-rescue.md b/.changeset/violet-buttons-rescue.md
new file mode 100644
index 000000000..cb2dee00c
--- /dev/null
+++ b/.changeset/violet-buttons-rescue.md
@@ -0,0 +1,5 @@
+---
+'@lion/helpers': patch
+---
+
+Add some styling improvements to action logger component.
diff --git a/packages/helpers/sb-action-logger/src/SbActionLogger.js b/packages/helpers/sb-action-logger/src/SbActionLogger.js
index 1e3285f78..ed5499fb8 100644
--- a/packages/helpers/sb-action-logger/src/SbActionLogger.js
+++ b/packages/helpers/sb-action-logger/src/SbActionLogger.js
@@ -20,6 +20,7 @@ export class SbActionLogger extends LitElement {
           --sb-action-logger-cue-color-primary: #3f51b5;
           --sb-action-logger-cue-color-secondary: #c5cae9;
           --sb-action-logger-cue-duration: 1000ms;
+          --sb-action-logger-max-height: 110px;
 
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
           display: block;
@@ -87,7 +88,7 @@ export class SbActionLogger extends LitElement {
 
         .logger {
           overflow-y: auto;
-          max-height: 110px;
+          max-height: var(--sb-action-logger-max-height);
         }
 
         .logger__log {
@@ -109,6 +110,7 @@ export class SbActionLogger extends LitElement {
         }
 
         .logger__log-count {
+          align-self: baseline;
           line-height: 8px;
           font-size: 12px;
           padding: 4px;