From d021e3a9a3e02668b6e4768123cb4db7cee7979b Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Wed, 23 Apr 2025 15:00:37 +0200
Subject: [PATCH 1/3] Fine tune teaser text positions

* Display icon inline file rights in upper corner for overlay text
  position.

* Display text inline file rights below card for overlay, right and
  none text position.

* Align buttons vertically.

* Center card content vertically in text position right.

REDMINE-20852
---
 .../externalLinkList/editor/index.js          |   1 +
 .../externalLinkList/frontend/ExternalLink.js | 102 ++++++++++--------
 .../frontend/ExternalLink.module.css          |  61 +++++++++--
 .../externalLinkList/stories.js               |  58 ++++++++++
 .../package/src/frontend/InlineFileRights.js  |   5 +-
 .../src/frontend/LinkButton.module.css        |   1 +
 .../package/src/frontend/Text.module.css      |   3 -
 .../IconInlineFileRights.js                   |   4 +-
 .../IconInlineFileRights.module.css           |  29 ++++-
 9 files changed, 204 insertions(+), 60 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
index e122329298..c70765f420 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
@@ -85,6 +85,7 @@ editor.contentElementTypes.register('externalLinkList', {
         values: ['left', 'right', 'center']
       });
       this.input('displayButtons', CheckBoxInputView);
+      this.group('ContentElementInlineFileRightsSettings');
     });
   }
 });
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
index 59ffb5d525..5cf5c3884d 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
@@ -87,6 +87,11 @@ export function ExternalLink({id, configuration, ...props}) {
 
   const scaleCategorySuffix = scaleCategorySuffixes[props.textSize || 'small'];
 
+  const inlineFileRightsAfterCard = props.textPosition === 'right' ||
+                                    props.textPosition === 'overlay' ||
+                                    props.textPosition === 'none';
+
+  const inlineFileRightsItems = [{file: thumbnailImageFile, label: 'image'}];
   return (
     <li className={classNames(styles.item,
                               styles[`textPosition-${props.textPosition}`],
@@ -101,53 +106,66 @@ export function ExternalLink({id, configuration, ...props}) {
             href={href}
             openInNewTab={openInNewTab}
             onChange={handleLinkChange}>
-        <div className={classNames(
-          styles.card,
-          styles[`thumbnailSize-${props.thumbnailSize}`]
-        )}>
-          <div className={styles.thumbnail}>
-            <Thumbnail imageFile={thumbnailImageFile}
-                       aspectRatio={props.thumbnailAspectRatio}
-                       cropPosition={props.thumbnailCropPosition}
-                       load={props.loadImages}>
-              <InlineFileRights context="insideElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
-            </Thumbnail>
-          </div>
-          <div className={classNames(styles.background,
-                                     styles[`align-${configuration.textAlign}`],
-                                     props.darkBackground ? styles.light : styles.dark)}
-               style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
-            <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
-            <div className={styles.details}>
-              {presentOrEditing('tagline') &&
-               <Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
-                 <EditableInlineText value={itemTexts[id]?.tagline}
-                                     placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
-                                     onChange={value => handleTextChange('tagline', value)} />
-               </Text>}
-              <Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
-                <EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
-                                    placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
-                                    onChange={value => handleTextChange('title', value)} />
-              </Text>
-              {presentOrEditing('description') &&
-               <div className={styles.link_desc}>
+        <div className={styles.cardWrapper}>
+          <div className={classNames(
+            styles.card,
+            styles[`thumbnailSize-${props.thumbnailSize}`]
+          )}>
+            <div className={styles.thumbnail}>
+              <Thumbnail imageFile={thumbnailImageFile}
+                         aspectRatio={props.thumbnailAspectRatio}
+                         cropPosition={props.thumbnailCropPosition}
+                         load={props.loadImages}>
+                <InlineFileRights configuration={configuration}
+                                  context="insideElement"
+                                  position={props.textPosition === 'overlay' ? 'top': 'bottom'}
+                                  items={inlineFileRightsItems} />
+              </Thumbnail>
+            </div>
+            <div className={classNames(styles.background,
+                                       styles[`align-${configuration.textAlign}`],
+                                       props.darkBackground ? styles.light : styles.dark)}
+                 style={{pointerEvents: !isEditable || isSelected ? undefined : 'none'}}>
+              {!inlineFileRightsAfterCard &&
+               <InlineFileRights configuration={configuration}
+                                 context="afterElement"
+                                 items={inlineFileRightsItems} />}
+              <div className={styles.details}>
+                {presentOrEditing('tagline') &&
+                 <Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
+                   <EditableInlineText value={itemTexts[id]?.tagline}
+                                       placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
+                                       onChange={value => handleTextChange('tagline', value)} />
+                 </Text>}
+                <Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
+                  <EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
+                                      placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
+                                      onChange={value => handleTextChange('title', value)} />
+                </Text>
+                {presentOrEditing('description') &&
                  <EditableText value={itemTexts[id]?.description || legacyTexts.description}
                                scaleCategory={`teaserDescription-${scaleCategorySuffix}`}
                                placeholder={t('pageflow_scrolled.inline_editing.type_text')}
-                               onChange={value => handleTextChange('description', value)} />
-               </div>}
-              {configuration.displayButtons && presentOrEditing('link') &&
-               <LinkButton className={styles.link}
-                           href={href}
-                           openInNewTab={openInNewTab}
-                           value={itemTexts[id]?.link}
-                           linkPreviewDisabled={true}
-                           actionButtonVisible={false}
-                           onTextChange={value => handleTextChange('link', value)}
-                           onLinkChange={value => handleLinkChange(value)} />}
+                               onChange={value => handleTextChange('description', value)} />}
+                {configuration.displayButtons && presentOrEditing('link') &&
+                 <div className={styles.button}>
+                   <LinkButton href={href}
+                               openInNewTab={openInNewTab}
+                               value={itemTexts[id]?.link}
+                               linkPreviewDisabled={true}
+                               actionButtonVisible={false}
+                               onTextChange={value => handleTextChange('link', value)}
+                               onLinkChange={value => handleLinkChange(value)} />
+                 </div>}
+              </div>
             </div>
           </div>
+          {inlineFileRightsAfterCard &&
+           <div className={styles.inlineFileRightsAfterCard}>
+             <InlineFileRights configuration={configuration}
+                               context="afterElement"
+                               items={inlineFileRightsItems} />
+           </div>}
         </div>
       </Link>
     </li>
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
index 7398abda03..777688bfce 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -34,19 +34,34 @@
   opacity: 1;
 }
 
+.textPosition-below .cardWrapper,
+.textPosition-right .cardWrapper{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .card {
   display: flex;
-  vertical-align: top;
   border-radius: var(--theme-content-element-box-border-radius);
   overflow: hidden;
   will-change: transform;
-  height: 100%;
+  flex: 1;
 }
 
 .textPosition-below .card {
   flex-direction: column;
 }
 
+.textPosition-overlay .card {
+  display: grid;
+}
+
+.textPosition-overlay .card > * {
+  grid-row: 1;
+  grid-column: 1;
+}
+
 .textPosition-none {
   composes: textPosition-below;
 }
@@ -96,19 +111,23 @@
 }
 
 .background {
-  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   color: var(--content-text-color);
   background-color: var(--card-surface-color);
   flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.textPosition-below .background,
+.textPosition-overlay .background {
+  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   padding-left: min(var(--padding-inline), 5px);
   padding-right: min(var(--padding-inline), 5px);
 }
 
 .textPosition-overlay .background {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
+  position: relative;
+  align-self: end;
   background: transparent;
   z-index: 1;
 }
@@ -123,12 +142,19 @@
   bottom: 0;
   background: linear-gradient(0deg, var(--card-surface-color), transparent);
   opacity: calc(0.9 * var(--overlay-opacity, 0.7));
+  pointer-events: none;
 }
 
 .textPosition-none .background {
   display: none;
 }
 
+.details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .textPosition-below .details,
 .textPosition-overlay .details {
   padding-top: 15px;
@@ -143,7 +169,8 @@
 }
 
 .textPosition-right .details {
-  padding: 10px 10px 10px 15px;
+  justify-content: center;
+  padding: max(10px, 10%) max(20px, 3%);
 }
 
 .details p,
@@ -151,7 +178,19 @@
   margin-bottom: 0;
 }
 
-.link {
+.details p {
+  margin-top: 1rem;
+}
+
+.button {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.textPosition-below .button,
+.textPosition-overlay .button {
   margin-bottom: -5px;
 }
 
@@ -162,3 +201,7 @@
 .align-right {
   text-align: right;
 }
+
+.textPosition-right .inlineFileRightsAfterCard {
+  display: flex;
+}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
index 048e09d5c2..ba96ba6ea8 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
@@ -166,6 +166,27 @@ storiesOfContentElement(module, {
         ]
       },
     },
+    {
+      name: 'Text inline file rights, text position right',
+      configuration: {
+        textPosition: 'right'
+      },
+      inlineFileRightsWidgetTypeName: 'textInlineFileRights',
+    },
+    {
+      name: 'Text inline file rights, text position overlay',
+      configuration: {
+        textPosition: 'overlay'
+      },
+      inlineFileRightsWidgetTypeName: 'textInlineFileRights',
+    },
+    {
+      name: 'Icon inline file rights, text position overlay',
+      configuration: {
+        textPosition: 'overlay'
+      },
+      inlineFileRightsWidgetTypeName: 'iconInlineFileRights',
+    },
     {
       name: 'With buttons',
       configuration: {
@@ -202,6 +223,43 @@ storiesOfContentElement(module, {
         ]
       }
     },
+    {
+      name: 'With buttons, text position right',
+      configuration: {
+        displayButtons: true,
+        textPosition: 'right',
+        itemTexts: {
+          1: {
+            title: editableTextValue('Item 1'),
+            description: editableTextValue('This is description'),
+            link: editableTextValue('Read more')
+          },
+          2: {
+            title: editableTextValue('Item 2'),
+            description: editableTextValue('This is another description'),
+            link: editableTextValue('Read more')
+          }
+        },
+        itemLinks: {
+          1: {
+            href: 'https://www.pageflow.io/'
+          },
+          2: {
+            href: 'https://www.pageflow.io/'
+          }
+        },
+        links: [
+          {
+            id: '1',
+            thumbnail: filePermaId('imageFiles', 'turtle')
+          },
+          {
+            id: '2',
+            thumbnail: filePermaId('imageFiles', 'turtle')
+          }
+        ]
+      }
+    },
     {
       name: 'With legacy external links',
       configuration: {
diff --git a/entry_types/scrolled/package/src/frontend/InlineFileRights.js b/entry_types/scrolled/package/src/frontend/InlineFileRights.js
index 33f26aa367..40809e1eab 100644
--- a/entry_types/scrolled/package/src/frontend/InlineFileRights.js
+++ b/entry_types/scrolled/package/src/frontend/InlineFileRights.js
@@ -8,6 +8,7 @@ import styles from './InlineFileRights.module.css';
 
 export function InlineFileRights({items = [],
                                   context = 'standAlone',
+                                  position,
                                   playerControlsFadedOut,
                                   playerControlsStandAlone,
                                   configuration = {}}) {
@@ -22,7 +23,9 @@ export function InlineFileRights({items = [],
 
   return (
     <Widget role="inlineFileRights"
-            props={{context, playerControlsFadedOut, playerControlsStandAlone, configuration}}>
+            props={{context, position,
+                    playerControlsFadedOut, playerControlsStandAlone,
+                    configuration}}>
       <ul className={styles.list}>
         {filteredItems.map(({label, file}) =>
           <li key={`${label}-${file.id}`}>
diff --git a/entry_types/scrolled/package/src/frontend/LinkButton.module.css b/entry_types/scrolled/package/src/frontend/LinkButton.module.css
index 4583dfccdc..1e65bb0c45 100644
--- a/entry_types/scrolled/package/src/frontend/LinkButton.module.css
+++ b/entry_types/scrolled/package/src/frontend/LinkButton.module.css
@@ -15,6 +15,7 @@
   min-width: var(--theme-link-button-width, 100%);
   box-sizing: border-box;
   justify-content: center;
+  align-items: center;
   gap: 0.5em;
   border-radius: var(--theme-link-button-border-radius, 5px);
   text-decoration: none;
diff --git a/entry_types/scrolled/package/src/frontend/Text.module.css b/entry_types/scrolled/package/src/frontend/Text.module.css
index e1586d770f..248dad8709 100644
--- a/entry_types/scrolled/package/src/frontend/Text.module.css
+++ b/entry_types/scrolled/package/src/frontend/Text.module.css
@@ -224,7 +224,6 @@
   line-height: 1.3;
   font-weight: bold;
   font-size: text-s;
-  margin-bottom: 1rem;
 }
 
 .teaserTitle-md {
@@ -233,7 +232,6 @@
   line-height: 1.3;
   font-weight: bold;
   font-size: 19.8px;
-  margin-bottom: 1rem;
 }
 
 .teaserTitle-sm {
@@ -242,7 +240,6 @@
   line-height: 1.3;
   font-weight: bold;
   font-size: 19.2px;
-  margin-bottom: 1rem;
 }
 
 .teaserTagline-lg {
diff --git a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js
index 7fa7fb2ecf..34c023171e 100644
--- a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js
+++ b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.js
@@ -6,14 +6,14 @@ import {ThemeIcon} from 'pageflow-scrolled/frontend';
 import styles from './IconInlineFileRights.module.css';
 
 export function IconInlineFileRights({
-  context, playerControlsStandAlone, playerControlsFadedOut, children
+  context, position, playerControlsStandAlone, playerControlsFadedOut, children
 }) {
   if (context === 'afterElement') {
     return null;
   }
 
   return (
-    <div className={classNames(styles.wrapper, {
+    <div className={classNames(styles.wrapper, styles[`position-${position || 'bottom'}`], {
       [styles.fadedOut]: context !== 'playerControls' || playerControlsFadedOut,
       [styles.standAlone]: context !== 'playerControls'
     })}>
diff --git a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
index 6605a12f89..4e23a3ff01 100644
--- a/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
+++ b/entry_types/scrolled/package/src/widgets/iconInlineFileRights/IconInlineFileRights.module.css
@@ -2,11 +2,19 @@
   color: #fff;
   position: absolute;
   right: 0;
-  bottom: 0;
   left: 0;
   display: flex;
   justify-content: flex-end;
   pointer-events: none;
+  z-index: 2;
+}
+
+.position-top {
+  top: 0;
+}
+
+.position-bottom {
+  bottom: 0;
 }
 
 .standAlone > * {
@@ -57,7 +65,6 @@
   font-family: sans-serif;
   line-height: 1.4;
   position: absolute;
-  bottom: 38px;
   right: 5px;
   background-color: rgba(17, 17, 17, 0.9);
   border-radius: 3px;
@@ -72,16 +79,32 @@
   z-index: 1;
 }
 
+.position-bottom .tooltip {
+  bottom: 38px;
+}
+
+.position-top .tooltip {
+  top: 38px;
+}
+
 .tooltip::after {
   content: "";
   display: block;
   border: solid 5px transparent;
-  border-top-color: rgba(17, 17, 17, 0.9);
   position: absolute;
   right: 11px;
+}
+
+.position-bottom .tooltip::after {
+  border-top-color: rgba(17, 17, 17, 0.9);
   top: 100%;
 }
 
+.position-top .tooltip::after {
+  border-bottom-color: rgba(17, 17, 17, 0.9);
+  bottom: 100%;
+}
+
 .tooltip a {
   color: #fff;
   text-decoration-color: rgba(255, 255, 255, 0.3);

From a853c8c9cabccaa6dc56a275bcef3a3aa9b36a3c Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Wed, 23 Apr 2025 15:02:57 +0200
Subject: [PATCH 2/3] Use one column of teasers on phone for overlay text
 position

Gets too busy otherwise.

REDMINE-20852
---
 .../frontend/ExternalLinkList.module.css        |  4 ++++
 .../frontend/textPositons/below.module.css      | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
index 95e7f369c1..81488aaf91 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.module.css
@@ -15,3 +15,7 @@
 .textPosition-below {
   min-height: 240px;
 }
+
+.textPosition-overlay {
+  --link-width-s-phone-columns: 1;
+}
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css
index fdf0a2ce65..a4667770f9 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css
@@ -24,11 +24,24 @@
   width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
 }
 
+.linkWidth-s > * {
+  max-width: 240px;
+}
+
 @container (min-width: 315px) {
-  .linkWidth-xs,
-  .linkWidth-s {
+  .linkWidth-xs {
     --columns: 2
   }
+
+  .linkWidth-s {
+    --columns: var(--link-width-s-phone-columns, 2)
+  }
+}
+
+@container (min-width: 400px) {
+  .linkWidth-s {
+    --columns: 2;
+  }
 }
 
 @container (min-width: 500px) {

From 2ae828bbfd3548103fbd16c0285a02c0bdabc2e5 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Wed, 23 Apr 2025 15:04:58 +0200
Subject: [PATCH 3/3] Enable all teaser text positions by default

REDMINE-20852
---
 .../scrolled/config/locales/new/ext-link-options.de.yml       | 3 ---
 .../scrolled/config/locales/new/ext-link-options.en.yml       | 3 ---
 entry_types/scrolled/lib/pageflow_scrolled/plugin.rb          | 1 -
 .../src/contentElements/externalLinkList/editor/index.js      | 4 +---
 4 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
index cc36a56345..eacf3e18a9 100644
--- a/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
+++ b/entry_types/scrolled/config/locales/new/ext-link-options.de.yml
@@ -1,7 +1,4 @@
 de:
-  pageflow:
-    external_links_options:
-      feature_name: "External Links Optionen"
   pageflow_scrolled:
     editor:
       content_elements:
diff --git a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
index 2f330ad4c4..536a64075f 100644
--- a/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
+++ b/entry_types/scrolled/config/locales/new/ext-link-options.en.yml
@@ -1,7 +1,4 @@
 en:
-  pageflow:
-    external_links_options:
-      feature_name: "External Links Options"
   pageflow_scrolled:
     editor:
       content_elements:
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
index 1b7d82c997..4251d305b5 100644
--- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
+++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -48,7 +48,6 @@ def configure(config)
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')
         c.features.register('backdrop_content_elements')
-        c.features.register('external_links_options')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
index c70765f420..bb14d25c0d 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js
@@ -42,9 +42,7 @@ editor.contentElementTypes.register('externalLinkList', {
       });
 
       this.input('textPosition', SelectInputView, {
-        values: features.isEnabled('external_links_options') ?
-                ['below', 'right', 'overlay', 'none'] :
-                ['below', 'none']
+        values: ['below', 'right', 'overlay', 'none']
       });
       this.group('ContentElementVariant', {entry});
       this.input('overlayOpacity', SliderInputView, {