From fcf3961aa0bcbee22fa0c2bea0fd106c898cd0e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=AA=20Boaventura?= <reneboaventuraneto@gmail.com>
Date: Tue, 23 Apr 2024 14:19:27 -0300
Subject: [PATCH] fix: tag multiselect styles (#586)

---
 src/components/TagMultiSelect.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/TagMultiSelect.tsx b/src/components/TagMultiSelect.tsx
index 64116807..a97dc84f 100644
--- a/src/components/TagMultiSelect.tsx
+++ b/src/components/TagMultiSelect.tsx
@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import { Chip, ComboBox, ListBoxItem, Select, SelectButton } from '..'
 
@@ -86,16 +86,11 @@ function TagMultiSelect({
         }}
         defaultOpen={false}
         triggerButton={
-          <SelectButton
-            css={{
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-              borderRight: `none`,
-              width: '150px',
-            }}
-          >
-            Match {matchOptions.find((el) => el.value === searchLogic).label}
-          </SelectButton>
+          <MultiSelectMatchButtonContainer>
+            <SelectButton>
+              Match {matchOptions.find((el) => el.value === searchLogic).label}
+            </SelectButton>
+          </MultiSelectMatchButtonContainer>
         }
       >
         {matchOptions.map(({ value, label }) => (
@@ -169,3 +164,12 @@ function TagMultiSelect({
 
 export type { TagMultiSelectProps }
 export { TagMultiSelect }
+
+const MultiSelectMatchButtonContainer = styled.div`
+  > div {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+    width: 150px;
+  }
+`