How to use ion-infinite-scroll on a large screen in Ionic 5 app?

Question

I am trying to add ion-infinite-scroll to my Ionic 5 app.

It is working fine when I view it on devices with small screens. I.e. If I try to scroll down on my phone, new items are displayed.

However, if I view it on a larger screen (i.e. a desktop monitor), only the original list of items are displayed, & there's no way I can see the full list of items.

Here is how it currently displays on a desktop:

Here is my HTML:

<ion-card *ngFor="let post of posts">
    <ion-item>
      {{ post.data().text }}
    </ion-item>
</ion-card>

<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMorePosts($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

And here is my Typescript:

    ngOnInit() {
    this.getPosts();
  }

  getPosts() {
    firebase.firestore().collection('posts').orderBy('created', 'desc').limit
      (this.pageSize).get()
      .then((docs) => {
        docs.forEach((doc) => {
          this.posts.push(doc);
        })
        this.cursor = this.posts[this.posts.length - 1];
        console.log(this.posts)
      }).catch((err) => {
        console.log(err)
      })
  }

  loadMorePosts(event) {
    firebase.firestore().collection('posts').orderBy('created', 'desc').startAfter
      (this.cursor).limit(this.pageSize).get()
      .then((docs) => {
        docs.forEach((doc) => {
          this.posts.push(doc);
        })
        console.log(this.posts)
        if (docs.size < this.pageSize) {
          // All documents have been loaded
          event.target.disabled = true;
        } else {
          event.target.complete();
          this.cursor = this.posts[this.posts.length - 1];
        }
      }).catch((err) => {
        console.log(err)
      })
  }

Can someone please tell me how I can display the additional remaining items when viewing on a larger screen?