From 9066094381180e0250e1a38fa64024fb1376bc7d Mon Sep 17 00:00:00 2001
From: yazninja <yazlesean@gmail.com>
Date: Mon, 25 Jul 2022 17:57:17 +0800
Subject: [PATCH] dynamic width for search categories

---
 src/renderer/less/pages.less        | 17 ++++++++++++-----
 src/renderer/views/pages/search.ejs |  4 +++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 81c4374f..d0c7a774 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -302,16 +302,23 @@
       min-width: 120px;
     }
   }
-
+  .categories{
+    display: grid;
+    grid-template-columns: repeat(3, minmax(200px, 1fr));
+    gap: 1rem;
+  }
   .cd-mediaitem-square.mediaitem-brick {
-    width: 530px !important;
-
+    width: 100% !important;
+    height: 168px;
+    padding-block: 0.5rem;
     .artwork-container .artwork {
       height: 168px !important;
-      width: 507px !important;
+      width: 100% !important;
       z-index: 1;
     }
-
+    .info-rect{
+      height: max-content;
+    }
     .title {
       font-weight: bold;
       justify-content: left;
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 8c2f8264..e0da1993 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -119,7 +119,7 @@
                 </div>
             </template>
         </div>
-        <div v-else>
+        <div v-else >
            <div v-if="categoriesReady || getCategories()">
                 <div>
                     <div class="col" v-if="categoriesView != null && categoriesView != [] && categoriesView[0].attributes != null && categoriesView[0].attributes.title != null">
@@ -131,6 +131,8 @@
                     <!-- <mediaitem-square :kind="'385'" size="600" v-for="item in recentlyPlayed.limit(10)" :item="item" :imagesize="800"></mediaitem-square>-->
                         <h3>{{categoriesView[0].attributes.title.stringForDisplay ?? ""}}</h3>
                     </div>   
+                </div>
+                <div class="categories">
                     <mediaitem-square :kind="'385'" size="600"
                     :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
                     :imagesize="800"