fix: news module not scrollable on large screens

src/app/modules/news/page/news-page.component.ts

@@ -48,11 +48,21 @@ export class NewsPageComponent implements OnInit {
    */
   news: SCMessage[] = [];
 
+  /**
+   * Minimum page size of queries
+   */
+  minPageSize = 10;
+
   /**
    * Page size of queries
    */
   pageSize = 10;
 
+  /**
+   * Element size in px
+   */
+  elementSize = [300, 300];
+
   /**
    * Relevant settings
    */
@@ -72,8 +82,8 @@ export class NewsPageComponent implements OnInit {
    * Fetch news from the backend
    */
   async fetchNews() {
-    this.from = 0;
+    this.from = this.pageSize;
-    this.news = await this.newsProvider.getList(this.pageSize, this.from, [
+    this.news = await this.newsProvider.getList(this.pageSize, 0, [
       ...this.filters,
     ]);
 
@@ -82,20 +92,32 @@ export class NewsPageComponent implements OnInit {
 
   /**
    * Loads more news
-   *
-   * @param infiniteScrollElement Infinite scroll element
    */
   async loadMore(
-    infiniteScrollElement: HTMLIonInfiniteScrollElement,
+    infiniteScrollElement?: HTMLIonInfiniteScrollElement,
+    more = this.pageSize,
   ): Promise<void> {
-    this.from += this.pageSize;
+    const from = this.from;
-    this.news = [
+    this.from += more;
-      ...this.news,
+    const fetchedNews = await this.newsProvider.getList(this.pageSize, from, [
-      ...(await this.newsProvider.getList(this.pageSize, this.from, [
       ...this.filters,
-      ])),
+    ]);
-    ];
+
-    await infiniteScrollElement.complete();
+    this.news = [...this.news, ...fetchedNews];
+    await infiniteScrollElement?.complete();
+  }
+
+  calcPageSize(entry: ResizeObserverEntry) {
+    this.pageSize = Math.max(
+      this.minPageSize,
+      Math.floor(entry.contentRect.width / this.elementSize[0]) *
+        Math.ceil(entry.contentRect.height / this.elementSize[1] + 0.25),
+    );
+    if (!this.from || this.from === 0) return;
+    const more = Math.max(0, this.pageSize - this.from);
+    if (more !== 0) {
+      void this.loadMore(undefined, Math.max(more, this.minPageSize));
+    }
   }
 
   /**

src/app/modules/news/page/news-page.html

@@ -22,7 +22,10 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-content-parallax">
+<ion-content
+  class="ion-content-parallax"
+  (elementSizeChange)="calcPageSize($event)"
+>
   <div>
     <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
       <ion-refresher-content

src/app/modules/news/page/news-page.scss

@@ -20,10 +20,6 @@
   margin: var(--spacing-sm);
   @include auto-grid(300px);
 
-  // force scrolling & infinite scroll
-  // fill in on large screens
-  min-height: 101%;
-
   > * {
     height: 100%;
   }