From 124a658f227c4bac5c49b75a6d8533753af1eb30 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Wed, 26 Feb 2025 16:14:17 +0200
Subject: [PATCH 1/3] fix(chip) styles for improved layout and responsiveness.

Replaces flex with grid to mathc angular implementation and to make ellipsis work. Simplifies margin logic by using `gap` and removes redundant parts' styles. Adds `ellipsis()` to truncate text and sets a max width for slotted content to match angular behavior.
---
 src/components/chip/themes/chip.base.scss | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/chip/themes/chip.base.scss b/src/components/chip/themes/chip.base.scss
index 0d532f5b0..a898a79d6 100644
--- a/src/components/chip/themes/chip.base.scss
+++ b/src/components/chip/themes/chip.base.scss
@@ -2,21 +2,25 @@
 @use 'styles/utilities' as *;
 
 :host {
-    display: inline-flex;
+    display: inline-block;
     vertical-align: top;
+    height: ;
 }
 
 :host button {
     @include type-style('body-2');
+    @include ellipsis();
 
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
     justify-content: center;
     align-items: center;
     font-family: var(--ig-font-family);
     border-style: none;
     box-shadow: none;
     cursor: pointer;
-    padding: pad(2px, 6px, 12px);
+    padding: 0 pad-inline(2px, 6px, 12px);
+    gap: sizable(rem(3px), rem(6px), rem(8px));
 
     &[disabled] {
         pointer-events: none;
@@ -110,14 +114,8 @@
     justify-content: center;
 }
 
-[part='prefix'] {
-    margin-inline-end: pad-inline(rem(3px), rem(6px), rem(8px));
-}
-
-[part='suffix'] {
-    margin-inline-start: pad-inline(rem(3px), rem(6px), rem(8px));
-}
-
 ::slotted(*) {
-    display: flex;
+    @include ellipsis();
+
+    max-width: 32ch;
 }

From a86b36f454ea6ebc2faa9d7f0f9b8c6f9a6f6740 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Wed, 26 Feb 2025 16:19:03 +0200
Subject: [PATCH 2/3] fix(chip) Remove unused height property from chip base
 styles

---
 src/components/chip/themes/chip.base.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/chip/themes/chip.base.scss b/src/components/chip/themes/chip.base.scss
index a898a79d6..62c0f40b1 100644
--- a/src/components/chip/themes/chip.base.scss
+++ b/src/components/chip/themes/chip.base.scss
@@ -4,7 +4,6 @@
 :host {
     display: inline-block;
     vertical-align: top;
-    height: ;
 }
 
 :host button {

From 81897897594521e4f7e6f21fc3e52aa48933d1b3 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 27 Feb 2025 09:57:21 +0200
Subject: [PATCH 3/3] refactor(chip): use rem units for padding

---
 src/components/chip/themes/chip.base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chip/themes/chip.base.scss b/src/components/chip/themes/chip.base.scss
index 62c0f40b1..0a72afba8 100644
--- a/src/components/chip/themes/chip.base.scss
+++ b/src/components/chip/themes/chip.base.scss
@@ -18,7 +18,7 @@
     border-style: none;
     box-shadow: none;
     cursor: pointer;
-    padding: 0 pad-inline(2px, 6px, 12px);
+    padding: 0 pad-inline(rem(2px), rem(6px), rem(12px));
     gap: sizable(rem(3px), rem(6px), rem(8px));
 
     &[disabled] {