From b4f70132b6aa54b70063685036a3485aed152314 Mon Sep 17 00:00:00 2001
From: Airidasz <61290246+Airidasz@users.noreply.github.com>
Date: Tue, 14 Sep 2021 05:01:48 +0300
Subject: [PATCH] Proportional scaling inside grid (#1514)

* Proportional scaling inside grid

Cards inside grid (subscriptions, trending and others using the same system) now scale according to grid size.

* Update _ft-list-item.sass

Co-authored-by: Preston <freetubeapp@protonmail.com>
---
 src/renderer/components/ft-auto-grid/ft-auto-grid.sass       | 2 +-
 .../components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css | 1 -
 src/renderer/sass-partials/_ft-list-item.sass                | 5 ++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.sass b/src/renderer/components/ft-auto-grid/ft-auto-grid.sass
index 7b2f06ca..7bbf3bfc 100644
--- a/src/renderer/components/ft-auto-grid/ft-auto-grid.sass
+++ b/src/renderer/components/ft-auto-grid/ft-auto-grid.sass
@@ -1,7 +1,7 @@
 .ft-auto-grid
   &.grid
     display: grid
-    grid-template-columns: repeat(auto-fill, 262px)
+    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr) )
     justify-content: space-evenly
     grid-gap: 8px
 
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
index 7a54f695..95b1c7c7 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
@@ -1,6 +1,5 @@
 .grid {
   min-height: 264px;
-  display: flex;
 }
 
 .list {
diff --git a/src/renderer/sass-partials/_ft-list-item.sass b/src/renderer/sass-partials/_ft-list-item.sass
index 8e93338f..999573ff 100644
--- a/src/renderer/sass-partials/_ft-list-item.sass
+++ b/src/renderer/sass-partials/_ft-list-item.sass
@@ -44,14 +44,12 @@ $thumbnail-overlay-opacity: 0.85
       opacity: 1
 
   .videoThumbnail
-    display: flex
     position: relative
 
     .thumbnailLink
       display: flex
 
     .thumbnailImage
-      height: 130px
 
       @include is-sidebar-item
         height: 75px
@@ -62,6 +60,7 @@ $thumbnail-overlay-opacity: 0.85
 
     .videoWatched
       position: absolute
+      top:0
       padding: 2px
       opacity: $thumbnail-overlay-opacity
       color: var(--primary-text-color)
@@ -207,7 +206,7 @@ $thumbnail-overlay-opacity: 0.85
       margin-bottom: 12px
 
       .thumbnailImage
-        width: 250px
+        width: 100%
 
     .title
       font-size: 18px