story-feed — layouts de ejemplo

Ejemplo para mostrar que el mismo <story-feed>, sin cambios, llena el 100% del contenedor donde se lo coloque — ya sea a pantalla completa o dentro de un bloque de tamaño fijo como un sidebar.

Nota: los dos <story-feed> de esta página apuntan al mismo endpoint sin client (dataset default),

1) Pantalla completa (app / mobile)

El contenedor (acá el mockup de teléfono; en un caso real sería html/body o un wrapper a nivel de página) define un alto explícito. story-feed ocupa el 100% de ese alto.

2) Sidebar de noticias

Layout de artículo con sidebar de 320px de ancho y 500px de alto fijo. story-feed ocupa ese mismo espacio sin desbordar ni necesitar el viewport completo.

Título del artículo de ejemplo

Contenido artículos reales de un sitio de noticias, con el sidebar de story-feed embebido al costado. El sidebar no necesita saber nada del feed: solo le da un contenedor con alto fijo y sticky positioning.

Al scrollear esta columna, el sidebar (con story-feed adentro) se mantiene visible gracias a position: sticky en .sidebar — story-feed en sí no usa position sticky ni conoce el layout que lo rodea.