From f3f01c46aaf02a4983a1113af40c636cd078fb8e Mon Sep 17 00:00:00 2001
From: Oksamies <asko.soisalo@gmail.com>
Date: Wed, 18 Dec 2024 18:09:38 +0200
Subject: [PATCH] Fix tag text ellipsing

---
 .../CategoryTagCloud/CategoryTagCloud.tsx        |  6 +++---
 .../stories/newComponents/Tag.stories.tsx        | 16 ++++++++++++----
 .../Card/CardPackage/CardPackage.tsx             |  2 +-
 .../cyberstorm/src/newComponents/Tag/Tag.css     |  6 +-----
 .../cyberstorm/src/newComponents/Tag/Tag.tsx     |  6 +++---
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
index f21557791..4ec1e1366 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
@@ -41,7 +41,7 @@ export const CategoryTagCloud = (props: Props) => {
           onClick={() => setSearchValue("")}
           csSize="medium"
         >
-          {`"${searchValue}"`}
+          <span>{`"${searchValue}"`}</span>
           <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faXmark} className={styles.icon} />
           </NewIcon>
@@ -63,7 +63,7 @@ export const CategoryTagCloud = (props: Props) => {
               <FontAwesomeIcon icon={faBan} />
             </NewIcon>
           ) : undefined}
-          {c.name}
+          <span>{c.name}</span>
           <NewIcon csMode="inline" noWrapper rootClasses={styles.icon}>
             <FontAwesomeIcon icon={faXmark} />
           </NewIcon>
@@ -76,7 +76,7 @@ export const CategoryTagCloud = (props: Props) => {
         csModifiers={["ghost"]}
         rootClasses={styles.clearButton}
       >
-        Clear all
+        <span>Clear all</span>
         <NewIcon csMode="inline" noWrapper>
           <FontAwesomeIcon icon={faXmark} className={styles.icon} />
         </NewIcon>
diff --git a/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
index 32b5f4952..c04a746b8 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
@@ -29,7 +29,9 @@ const Template: StoryFn<typeof NewTag> = () => {
                 csSize={size}
                 csModifiers={[modifier]}
               >
-                {size}-{variant}-{modifier}
+                <span>
+                  {size}-{variant}-{modifier}
+                </span>
                 <NewIcon csMode={"inline"} noWrapper>
                   <FontAwesomeIcon icon={faChevronDown} />
                 </NewIcon>
@@ -40,7 +42,9 @@ const Template: StoryFn<typeof NewTag> = () => {
                 csSize={size}
                 csModifiers={[modifier, "hoverable"]}
               >
-                {size}-{variant}-{modifier}-hoverable
+                <span>
+                  {size}-{variant}-{modifier}-hoverable
+                </span>
                 <NewIcon csMode={"inline"} noWrapper>
                   <FontAwesomeIcon icon={faChevronDown} />
                 </NewIcon>
@@ -56,7 +60,9 @@ const Template: StoryFn<typeof NewTag> = () => {
             csSize={size}
             csModifiers={[modifier]}
           >
-            {size}-{variant}-{modifier}
+            <span>
+              {size}-{variant}-{modifier}
+            </span>
             <NewIcon csMode={"inline"} noWrapper>
               <FontAwesomeIcon icon={faChevronDown} />
             </NewIcon>
@@ -77,7 +83,9 @@ const Template: StoryFn<typeof NewTag> = () => {
             csVariant={variant}
             csSize={size}
           >
-            {size}-{variant}-noModifier
+            <span>
+              {size}-{variant}-noModifier
+            </span>
             <NewIcon csMode={"inline"} noWrapper>
               <FontAwesomeIcon icon={faChevronDown} />
             </NewIcon>
diff --git a/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx
index e8e47d86e..63e768b61 100644
--- a/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx
+++ b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx
@@ -142,7 +142,7 @@ export function CardPackage(props: Props) {
                   csSize="xsmall"
                   csModifiers={["dark", "hoverable"]}
                 >
-                  {c.name}
+                  <span>{c.name}</span>
                 </NewTag>
               ))
             : null}
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.css b/packages/cyberstorm/src/newComponents/Tag/Tag.css
index 9f3bb9536..f13e3c760 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag.css
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.css
@@ -15,11 +15,7 @@
     padding-inline: var(--tag-padding-inline);
   }
 
-  .ts-tag__content {
-    display: flex;
-    gap: var(--tag-gap);
-    align-items: center;
-    justify-content: center;
+  .ts-tag > span {
     min-width: 0;
     overflow-x: clip;
     white-space: nowrap;
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
index 10707f321..8b7738b9a 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
@@ -53,7 +53,7 @@ export const Tag = React.forwardRef<
         )}
         ref={fRef}
       >
-        <div className="ts-tag__content">{children}</div>
+        {children}
       </Actionable>
     );
   }
@@ -72,7 +72,7 @@ export const Tag = React.forwardRef<
         )}
         ref={fRef}
       >
-        <div className="ts-tag__content">{children}</div>
+        {children}
       </Actionable>
     );
   }
@@ -89,7 +89,7 @@ export const Tag = React.forwardRef<
       )}
       ref={forwardedRef}
     >
-      <div className="ts-tag__content">{children}</div>
+      {children}
     </Frame>
   );
 });