Remove theme name and column controllers. Make themes into a fixed sized and the column responsive.

src/app/components/themes/themes.component.html

@@ -1,6 +1,6 @@
 <form #themeForm="ngForm">
   <h4>Theme Options</h4>
-  <div fxLayout="row" fxLayoutAlign="space-between center">
+  <div>
     <!-- Theme level menu -->
     <mat-form-field>
       <mat-label>Theme level</mat-label>
@@ -10,20 +10,13 @@
         <mat-option value="song">Song</mat-option>
       </mat-select>
     </mat-form-field>
-    <!-- Names toggle -->
-    <mat-slide-toggle color="primary" labelPosition="before" [checked]="displayNames" (change)="toggleNames($event.checked)">Names</mat-slide-toggle>
-    <!-- Columns menu -->
-    <mat-form-field>
-      <mat-label>Columns</mat-label>
-      <input matInput type="number" min=1 [value]="columns" (change)="setLayout($event.target.value)">
-    </mat-form-field>
   </div>
   <!-- Themes display -->
-  <div class="content" fxLayout="row wrap" [fxLayoutGap]="_padding" *ngIf="isThemeLevelSupported()">
-    <div [fxFlex]="_colWidth" *ngFor="let theme of themeList;">
-      <mat-card (click)='setTheme(theme.name)' [class.selected]="theme.selected">
+  <div class="theme-container content" *ngIf="isThemeLevelSupported()">
+    <div *ngFor="let theme of themeList;">
+      <mat-card class="theme-card" (click)='setTheme(theme.name)' [class.selected]="theme.selected">
         <img [src]="theme.thumbnail"/>
-        <div class="theme-title" *ngIf="displayNames">{{ theme.name }}</div>
+        <div class="theme-title">{{ theme.name }}</div>
       </mat-card>
     </div>
   </div>

src/app/components/themes/themes.component.scss

@@ -21,6 +21,24 @@ img {
     font-weight: 700;
 }
 
+.theme-container {
+    display: grid;
+    justify-content: space-evenly;
+    grid-template-columns: repeat(auto-fill, min(220px, 100%));
+    gap: 1rem;
+}
+
+.theme-card {
+
+}
+
 .theme-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.theme-title:hover {
+    overflow: visible;
     white-space: pre-wrap;
-}
+}

src/app/components/themes/themes.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-
 import { OpenLPService } from '../../openlp.service';
 import { PageTitleService } from '../../page-title.service';
 
@@ -14,19 +12,12 @@ export class ThemesComponent implements OnInit {
   private _theme = null;
   private _themeList = [];
   private _themeLevel = null;
-  // Layout variables
-  private _displayNames = true;
-  private _columns = '6'; // Stored as string for mat-select to work properly
-  private _colWidth;
-  private _padding;
-  private _paddingRatio = .5; // How much of a column the sum of all the paddings equals to
 
   constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
     pageTitleService.changePageTitle('Themes');
   }
 
   ngOnInit() {
-    this.setLayout(this._columns);
     this.getThemeLevel();
     this.getThemes();
   }
@@ -44,14 +35,6 @@ export class ThemesComponent implements OnInit {
     this.openlpService.setThemeLevel(level).subscribe(() => this.getTheme());
   }
 
-  get displayNames() {
-    return this._displayNames;
-  }
-
-  get columns(): string {
-    return this._columns;
-  }
-
   isThemeLevelSupported(): boolean {
     return this._themeLevel !== 'song';
   }
@@ -79,22 +62,4 @@ export class ThemesComponent implements OnInit {
   setTheme(themeName: string) {
     this.openlpService.setTheme(themeName).subscribe(() => this.getTheme());
   }
-
-  setLayout(columns: string) {
-    if (parseInt(columns, 10) <= 0) { columns = '1'; }
-    this._columns = columns;
-    const intColumns = parseInt(columns, 10); // We convert to int to be able to do the math operations
-    if (intColumns === 1) {
-      this._colWidth = 100;
-      this._padding = 0;
-    }
-    else {
-      this._colWidth = 100 / (intColumns + this._paddingRatio);
-      this._padding = `${(this._paddingRatio * this._colWidth) / intColumns}%`;
-    }
-  }
-
-  toggleNames(value: boolean) {
-    this._displayNames = value;
-  }
 }