Merge pull request #2170 from tf/hotspots-overflow

Fix horizontal overflow on mobile caused by hotspots scroll buttons
codevise · Nov 5, 2024 · d801aa8 · d801aa8
2 parents 87b932f + e5fb9e3
commit d801aa8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git 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
@@ -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,