UX: Improve groups list in feature table when many groups (#1254)

keegangeorge · web-flow · commit ef08e5ea4515 · 2025-04-10T09:14:51.000-07:00
This update improves the displaying of groups in the features table when there are many groups for a particular persona.
diff --git a/assets/stylesheets/common/ai-features.scss b/assets/stylesheets/common/ai-features.scss
@@ -17,16 +17,16 @@
 
   &__row-item-groups {
     list-style: none;
-    margin: 0.5em 0 0 0;
     display: flex;
+    flex-flow: row wrap;
+    gap: 0.25em;
 
     li {
       font-size: var(--font-down-2);
       border-radius: var(--d-border-radius);
       background: var(--primary-very-low);
       border: 1px solid var(--primary-low);
       padding: 1px 3px;
-      margin-right: 0.5em;
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -17,16 +17,16 @@`
`17`	`17`
`18`	`18`	`&__row-item-groups {`
`19`	`19`	`list-style: none;`
`20`		`- margin: 0.5em 0 0 0;`
`21`	`20`	`display: flex;`
	`21`	`+ flex-flow: row wrap;`
	`22`	`+ gap: 0.25em;`
`22`	`23`
`23`	`24`	`li {`
`24`	`25`	`font-size: var(--font-down-2);`
`25`	`26`	`border-radius: var(--d-border-radius);`
`26`	`27`	`background: var(--primary-very-low);`
`27`	`28`	`border: 1px solid var(--primary-low);`
`28`	`29`	`padding: 1px 3px;`
`29`		`- margin-right: 0.5em;`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`	`}`