From 8b8044d6a691365589b5240ca3d48465e2b3d083 Mon Sep 17 00:00:00 2001
From: Jonas Snellinckx <jonas.snellinckx@gmail.com>
Date: Sat, 22 Feb 2020 14:31:02 +0100
Subject: [PATCH] fix(#243): shifted titles large screen

---
 .../_shared/TracksGrid/TrackGridRow.tsx       | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/renderer/_shared/TracksGrid/TrackGridRow.tsx b/src/renderer/_shared/TracksGrid/TrackGridRow.tsx
index 824b7c8c..4bb2c450 100644
--- a/src/renderer/_shared/TracksGrid/TrackGridRow.tsx
+++ b/src/renderer/_shared/TracksGrid/TrackGridRow.tsx
@@ -18,23 +18,17 @@ interface Props {
 
 @autobind
 export class TrackGridRow extends React.PureComponent<Props> {
-  private getClassesForItemCount(itemsPerRow: number): string {
-    switch (itemsPerRow) {
-      case 1:
-        return 'col-12';
-      case 2:
-        return 'col-6';
-      case 3:
-        return 'col-4';
-      case 4:
-      default:
-        return 'col-3';
-    }
+  get itemWidth(): string {
+    const {
+      data: { itemsPerRow }
+    } = this.props;
+
+    return `${100 / itemsPerRow}%`;
   }
 
   private renderItem(index: number) {
     const {
-      data: { showInfo, objectId, items, itemsPerRow }
+      data: { showInfo, objectId, items }
     } = this.props;
 
     const item = items[index];
@@ -43,7 +37,8 @@ export class TrackGridRow extends React.PureComponent<Props> {
       return (
         <div
           key={`grid-item-${item.schema}-${item.id}`}
-          className={cn('userWrapper', this.getClassesForItemCount(itemsPerRow))}>
+          className={cn('userWrapper')}
+          style={{ width: this.itemWidth }}>
           <TrackGridUser withStats idResult={item} />
         </div>
       );
@@ -52,7 +47,7 @@ export class TrackGridRow extends React.PureComponent<Props> {
     const showReposts = objectId === PlaylistTypes.STREAM;
 
     return (
-      <div key={`grid-item-${item.schema}-${item.id}`} className={this.getClassesForItemCount(itemsPerRow)}>
+      <div key={`grid-item-${item.schema}-${item.id}`} style={{ width: this.itemWidth }}>
         <TrackGridItem
           showReposts={showReposts}
           key={`grid-item-${item.schema}-${item.id}`}