From e5fb9e38c801dc21243cb6339c61b87f4d402046 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Tue, 5 Nov 2024 10:25:13 +0100
Subject: [PATCH] Fix horizontal overflow on mobile caused by hotspots scroll
 buttons

REDMINE-20673
---
 .../src/contentElements/hotspots/ScrollButton.js     |  1 -
 .../contentElements/hotspots/ScrollButton.module.css | 12 ++++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.js b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.js
index cd16af579..57856af1f 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.js
@@ -11,7 +11,6 @@ export function ScrollButton({direction, disabled, onClick}) {
 
   return (
     <button className={classNames(styles.button,
-                                  styles[direction],
                                   {[styles.disabled]: disabled})}
             tabIndex="-1"
             onClick={onClick}>
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
index ffdd98702..17d135214 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css
@@ -6,14 +6,13 @@
   color: #fff;
   transition: opacity 0.2s linear, visibility 0.2s;
   pointer-events: auto;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
+.icon {
+  display: flex;
+  justify-content: center;;
 }
 
 .disabled {
@@ -27,6 +26,7 @@
   width: var(--theme-hotspts-scroll-button-size);
   height: var(--theme-hotspots-scroll-button-size);
   filter: drop-shadow(0 1px 4px #000);
+  flex-shrink: 0;
 }
 
 .button:not(.disabled):hover svg,