fix: the Badge component should be default act like an “inline” compo…

…nent Exception is when inside a table, for some reason display: grid positions correctly in that case.
tablecheck · Jul 1, 2024 · fb85b15 · fb85b15
1 parent 9dc9431
commit fb85b15
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/system/core/src/components/Badge.ts b/system/core/src/components/Badge.ts
@@ -6,7 +6,7 @@ export const className = 'badge';
 export const fullStyles = css`
   width: max-content;
   font: var(--label);
-  display: grid;
+  display: inline-grid;
   grid-auto-flow: column;
   gap: var(--spacing-l1);
   align-items: center;
@@ -15,6 +15,10 @@ export const fullStyles = css`
   color: var(--neutral-text);
   background-color: var(--neutral-surface);
 
+  table & {
+    display: grid;
+  }
+
   &[data-size='x-small'] {
     padding: 2px 6px;
     font-size: 12px;