From d623bcf1a7b6022af860ad534ecdc0a7d5e1cb1c Mon Sep 17 00:00:00 2001
From: Tanishq Singh <hi@tanishqsingh.com>
Date: Tue, 1 Oct 2024 22:11:29 +0530
Subject: [PATCH] fix: styling with filter owner (#1518)

---
 src/common/search/FilterPlays.jsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 54f2ceffff..eff222687b 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -164,8 +164,12 @@ const FilterPlays = ({ onChange, query }) => {
                   icon={icon}
                   style={{ padding: 0 }}
                 />
-                <div className="flex md-ml-8 min-w-0 ml-2 items-center">
-                  <span className="rounded-full">
+                <div
+                  className={`flex md-ml-8 min-w-0 ml-2 ${field.datafield == 'creators' ? '!justify-start w-full' : null} items-center`}
+                >
+                  <span
+                    className={`${field.datafield == 'creators' ? 'ml-4 mr-3' : null} rounded-full`}
+                  >
                     {field.avatar && getOptionNode(field, option)[field.avatar] ? (
                       <span className="flex items-center justify-center md-h-12 h-8 md-w-16 w-8 mr-4">
                         <img
@@ -176,7 +180,14 @@ const FilterPlays = ({ onChange, query }) => {
                       </span>
                     ) : null}
                   </span>
-                  <span className="break-words min-w-0">
+                  <span
+                    className={`break-words min-w-0 ${field.datafield == 'creators' ? 'truncate' : null}`}
+                    title={
+                      field.datafield == 'creators' && field.node
+                        ? option[field.node][field.fieldName]
+                        : ''
+                    }
+                  >
                     {field.node ? option[field.node][field.fieldName] : option[field.fieldName]}
                   </span>
                 </div>