Support displaying scroll buttons below teaser list

REDMINE-20981

Author: tf

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js

@@ -6,6 +6,7 @@ import {
   useContentElementEditorState,
   useContentElementLifecycle,
   useDarkBackground,
+  useTheme,
   contentElementWidthName,
   contentElementWidths
 } from 'pageflow-scrolled/frontend';
@@ -29,6 +30,7 @@ export function ExternalLinkList(props) {
   const linkList = props.configuration.links || [];
   const {shouldLoad} = useContentElementLifecycle();
   const darkBackground = useDarkBackground();
+  const theme = useTheme();
 
   const {setTransientState, isSelected} = useContentElementEditorState();
   const [selectedItemId, setSelectedItemId] = useState();
@@ -80,7 +82,8 @@ export function ExternalLinkList(props) {
   const linkAlignment = scrollerEnabled ? 'left' : props.configuration.linkAlignment;
 
   return (
-    <div className={classNames({[styles.contentMargin]: props.customMargin || fullWidth})}>
+    <div className={classNames({[styles.contentMargin]: props.customMargin || fullWidth},
+                               styles[`scrollButtons-${theme.options.teasersScrollButtons}`])}>
       <Scroller enabled={scrollerEnabled}>
         {({scrollerRef, handleScroll}) =>
           <div className={classNames(styles.container, {[styles.fullContainer]: fullWidth})}>

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css

@@ -21,6 +21,18 @@
   grid-column: 1;
 }
 
+.scrollButtons-below > button:first-child,
+.scrollButtons-below > button {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: end;
+  width: auto;
+}
+
+.scrollButtons-below > button:first-child {
+  justify-self: start;
+}
+
 .container {
   grid-column: 2;
   container-type: inline-size;