From 46b8ddcd2aa638422934eb28e06f6aa69d60dd88 Mon Sep 17 00:00:00 2001
From: shawly <shawlyde@gmail.com>
Date: Thu, 20 Oct 2022 00:34:19 +0200
Subject: [PATCH] fix(game-detail): prevent overflow of long company logos

Fixes grimsi/gameyfin#55
---
 .../game-detail-view/game-detail-view.component.html      | 6 +++---
 .../game-detail-view/game-detail-view.component.scss      | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/game-detail-view/game-detail-view.component.html b/frontend/src/app/components/game-detail-view/game-detail-view.component.html
index 8d2d39b..692a2cf 100644
--- a/frontend/src/app/components/game-detail-view/game-detail-view.component.html
+++ b/frontend/src/app/components/game-detail-view/game-detail-view.component.html
@@ -3,7 +3,7 @@
   <div fxLayout="column" fxFlex="0 1 75" fxLayoutGap="16px" fxFlex.lt-lg="95">
     <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
 
-      <mat-card fxFlex="60" fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
+      <mat-card fxFlex="100" fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="16px">
         <div fxLayoutAlign="start" fxLayoutAlign.lt-lg="center">
           <img src="v1/images/{{game.coverId}}" style="max-height: 352px" alt="Game cover">
         </div>
@@ -20,8 +20,8 @@
           <div *ngIf="companiesWithLogo.length > 0">
             <h2>Developed by</h2>
             <div fxLayout="row wrap" fxLayoutGap="8px grid">
-              <div *ngFor="let company of companiesWithLogo">
-                <img style="height: 52px;" src="v1/images/{{company.logoId}}" alt="{{company.name}}" [matTooltip]="company.name">
+              <div *ngFor="let company of companiesWithLogo" class="company-logos">
+                <img src="v1/images/{{company.logoId}}" alt="{{company.name}}" [matTooltip]="company.name">
               </div>
             </div>
           </div>
diff --git a/frontend/src/app/components/game-detail-view/game-detail-view.component.scss b/frontend/src/app/components/game-detail-view/game-detail-view.component.scss
index e69de29..fda9bd6 100644
--- a/frontend/src/app/components/game-detail-view/game-detail-view.component.scss
+++ b/frontend/src/app/components/game-detail-view/game-detail-view.component.scss
@@ -0,0 +1,8 @@
+.mat-card {
+//   min-height: max-content;
+
+  .company-logos img {
+    max-height: 52px;
+    max-width: 260px;
+  }
+}