How to make expanded tiles vertical

How to make the expanded tile vertical

1. Remove Unnecessary Classes In the ExpandedTiles template expanded-tile.template.tsx, remove the following class names to prevent horizontal swiper behavior:

• swiper-wrapper

• swiper

• swiper-expanded

• swiper-slide

1. Add this click listener to close Tile when clicking outside of Expanded Tile in vertical list in widget.tsx. To close the Expanded Tile when clicking outside of it, add this JavaScript event listener:

const dialog = sdk.querySelector("#overlay-expanded-tiles")
dialog.addEventListener("click", event => {
  if (dialog === event.target) {
    sdk.closeExpandedTiles()
  }
})

1. Hide navigation arrows on Expanded Tile: Since the tile is now vertical, hide the left/right arrows using CSS.

#nosto-ugc-extensions {
    #overlay-expanded-tiles {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .swiper-expanded-button-prev,
    .swiper-expanded-button-next {
        display: none !important;
    }
}

@media only screen and (max-width: 992px) {
    .ugc-tile {
        width: 100vw;
    }
    .panel,
    .panel-left,
    .panel-right {
        width: 100vw;
        box-sizing: border-box;
    }
}
Copy

Summary

✔ Expanded tile will be displayed vertically.

✔ Clicking outside the tile will close it.

✔ Navigation arrows are hidden.

✔ Vertical scrolling is enabled for long content.