From e94bad7306a012744dd6c840914ce1fab3d78cca Mon Sep 17 00:00:00 2001 From: Pascal Riesinger Date: Fri, 5 Jul 2024 13:14:41 +0200 Subject: [PATCH] Improve spacing between chips This patch uses the `gap` property instead of margins on the chip cards container, which fixes some alignment bugs in some cases --- src/cards/chips-card/chips-card.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/cards/chips-card/chips-card.ts b/src/cards/chips-card/chips-card.ts index 7a3c2398..bbedcc61 100644 --- a/src/cards/chips-card/chips-card.ts +++ b/src/cards/chips-card/chips-card.ts @@ -121,7 +121,7 @@ export class ChipsCard extends LitElement implements LovelaceCard { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; - margin-bottom: calc(-1 * var(--chip-spacing)); + gap: var(--chip-spacing); } .chip-container.align-end { justify-content: flex-end; @@ -132,16 +132,6 @@ export class ChipsCard extends LitElement implements LovelaceCard { .chip-container.align-justify { justify-content: space-between; } - .chip-container * { - margin-bottom: var(--chip-spacing); - } - .chip-container *:not(:last-child) { - margin-right: var(--chip-spacing); - } - .chip-container[rtl] *:not(:last-child) { - margin-right: initial; - margin-left: var(--chip-spacing); - } `, ]; }