From 72c8d4132c2aac2fb3b34071b61bd61dbcbeeae8 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 2 May 2024 10:57:27 +0200
Subject: [PATCH] fixed tag view for multiline tags

---
 src/Components/Map/Subcomponents/Controls/SearchControl.tsx | 4 ++--
 src/Components/Profile/TagsWidget.tsx                       | 2 +-
 src/Components/Templates/TagView.tsx                        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index a694d82b..b6ed1c3a 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -104,8 +104,8 @@ export const SearchControl = () => {
                 {hideSuggestions || Array.from(geoResults).length == 0 && itemsResults.length == 0 && tagsResults.length == 0 && !isGeoCoordinate(value)|| value.length == 0? "" :
                     <div className='tw-card tw-card-body tw-bg-base-100 tw-p-4 tw-mt-2 tw-shadow-xl tw-overflow-y-auto tw-max-h-[calc(100dvh-152px)]'>
                         {tagsResults.length > 0 &&
-                            <div className='tw-flex tw-flex-wrap tw-max-h-16 tw-overflow-hidden tw-min-h-[32px]'>
-                                {tagsResults.map(tag => (
+                            <div className='tw-flex tw-flex-wrap'>
+                                {tagsResults.slice(0, 3).map(tag => (
                                     <div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-1 tw-px-4 tw-shadow-md tw-card tw-mr-2 tw-mb-2 tw-cursor-pointer' style={{ backgroundColor: tag.color }} onClick={() => {
                                         addFilterTag(tag)
                                         let params = new URLSearchParams(window.location.search);
diff --git a/src/Components/Profile/TagsWidget.tsx b/src/Components/Profile/TagsWidget.tsx
index 55a6992b..49173ed5 100644
--- a/src/Components/Profile/TagsWidget.tsx
+++ b/src/Components/Profile/TagsWidget.tsx
@@ -82,7 +82,7 @@ export const TagsWidget = ({placeholder, containerStyle, defaultTags, onUpdate})
     }} className={`tw-input tw-input-bordered tw-cursor-text ${containerStyle}`}>
       <div className='tw-flex tw-flex-wrap tw-h-fit'>
       {defaultTags.map((tag) => (
-        <div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-h-[2.75em] tw-mt-3 tw-mr-4' style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
+        <div key={tag.name} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4' style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
           <div className="tw-card-actions tw-justify-end">
             <label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (deleteTag(tag))}>✕</label>
           </div><b>{decodeTag(tag.name)}</b>
diff --git a/src/Components/Templates/TagView.tsx b/src/Components/Templates/TagView.tsx
index b560b71d..832e8aa7 100644
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@@ -6,7 +6,7 @@ export const TagView = ({tag, heighlight, onClick} : {tag: Tag, heighlight?: boo
   return (
      // Use your imagination to render suggestions.
 
-    <div key={tag.name} onClick={onClick} className={`tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-h-[2.75em] tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-primary tw-shadow-te-primary'}`} style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
+    <div key={tag.name} onClick={onClick} className={`tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card  tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-primary tw-shadow-te-primary'}`} style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
       <div className="tw-card-actions tw-justify-end">
       </div><b>{decodeTag(tag.name)}</b>
     </div>