wip

Author: tf

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

@@ -14,7 +14,6 @@
 
 .item > a {
   text-decoration: none;
-  display: block;
 }
 
 .outlined::before {

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

@@ -79,10 +79,10 @@ export function ExternalLinkList(props) {
   const linkAlignment = scrollerEnabled ? 'left' : props.configuration.linkAlignment;
 
   return (
-    <div className={styles.container}>
-      <div className={styles.wrapper}>
-        <Scroller enabled={scrollerEnabled}>
-          {({scrollerRef, handleScroll}) =>
+    <div className={styles.wrapper}>
+      <Scroller enabled={scrollerEnabled}>
+        {({scrollerRef, handleScroll}) =>
+          <div className={styles.container}>
             <ul ref={scrollerRef}
                 className={classNames(
                   styles.list,
@@ -123,9 +123,9 @@ export function ExternalLinkList(props) {
                               onClick={event => handleItemClick(event, link.id)} />
               )}
             </ul>
-          }
-        </Scroller>
-      </div>
+          </div>
+        }
+      </Scroller>
     </div>
   );
 }

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

@@ -1,6 +1,7 @@
 @value contentColorScope from "pageflow-scrolled/values/colors.module.css";
 
 .container {
+  grid-column: 2;
   container-type: inline-size;
 }
 
@@ -25,7 +26,6 @@
 }
 
 .list {
-  grid-column: 2;
   composes: scope-externalLinks from global;
   composes: contentColorScope;
   padding: 0;

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css

@@ -1,7 +1,7 @@
 .list {
   --columns: 1;
   --gap: 1rem;
-  --reference-width: min(var(--reference-max-width), 100cqw - 2 * var(--content-margin));
+  --reference-width: min(var(--reference-max-width), 100%);
 
   display: flex;
   flex-wrap: wrap;
@@ -92,6 +92,11 @@
     --gap: 1.5rem;
   }
 
+  .linkWidth-xs,
+  .linkWidth-full-xs {
+    --gap: 1rem;
+  }
+
   .linkWidth-xs {
     --columns: 3;
   }
@@ -114,6 +119,11 @@
     --gap: 2rem;
   }
 
+  .linkWidth-xs,
+  .linkWidth-full-xs {
+    --gap: 1rem;
+  }
+
   .linkWidth-xs {
     --columns: 4;
   }