fix(web-ui): prevent mini app card tags from being squeezed

src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts

@@ -1,5 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
+import { compile } from 'sass';
 import { describe, expect, it } from 'vitest';
 
 function readRelative(filename: string): string {
@@ -9,6 +10,8 @@ function readRelative(filename: string): string {
   ).replace(/\r\n/g, '\n');
 }
 
+const cardCss = compile(fileURLToPath(new URL('./MiniAppCard.scss', import.meta.url))).css;
+
 describe('Mini App card presentation', () => {
   it('bounds the card without coupling its height to its width', () => {
     const stylesheet = readRelative('./MiniAppCard.scss');
@@ -39,6 +42,44 @@ describe('Mini App card presentation', () => {
     expect(stylesheet).not.toContain('aspect-ratio: 12 / 5;');
   });
 
+  it('lets actions move to a new line instead of squeezing tags into the remaining width', () => {
+    const footer = cardCss.match(/\.miniapp-card__footer \{([^}]+)\}/)?.[1];
+    const actions = cardCss.match(/\.miniapp-card__actions \{([^}]+)\}/)?.[1];
+
+    expect(footer).toContain('display: flex;');
+    expect(footer).toContain('flex-wrap: wrap;');
+    expect(footer).not.toContain('grid-template-columns:');
+    expect(actions).toContain('margin-inline-start: auto;');
+    expect(actions).toContain('flex-shrink: 0;');
+    expect(actions).not.toContain('grid-column:');
+  });
+
+  it('wraps whole tag pills and applies ellipsis in a block formatting context', () => {
+    const tags = cardCss.match(/\.miniapp-card__tags \{([^}]+)\}/)?.[1];
+    const tag = cardCss.match(/\.miniapp-card__tag \{([^}]+)\}/)?.[1];
+    const sharedTag = cardCss.match(/\.miniapp-card__tag,\s*\.miniapp-card__tag-overflow \{([^}]+)\}/)?.[1];
+
+    expect(tags).toContain('flex: 1 1 auto;');
+    expect(tags).toContain('flex-wrap: wrap;');
+    expect(tags).toContain('max-width: 100%;');
+    expect(tags).not.toContain('overflow: hidden;');
+    expect(tag).toContain('display: block;');
+    expect(tag).toContain('flex: 0 0 auto;');
+    expect(tag).toContain('box-sizing: border-box;');
+    expect(tag).toContain('max-width: min(100%, 16ch);');
+    expect(sharedTag).toContain('white-space: nowrap;');
+    expect(sharedTag).toContain('overflow: hidden;');
+    expect(sharedTag).toContain('text-overflow: ellipsis;');
+  });
+
+  it('keeps the overflow count intact and retains the compact tag summary', () => {
+    const overflow = cardCss.match(/(?:^|\})\s*\.miniapp-card__tag-overflow \{([^}]+)\}/)?.[1];
+
+    expect(overflow).toContain('flex: 0 0 auto;');
+    expect(cardCss).toMatch(/@container miniapp-card \(max-width: 519px\) \{\s*\.miniapp-card__tag--compact-hidden,\s*\.miniapp-card__tag-overflow--wide \{\s*display: none;/);
+    expect(cardCss).toMatch(/@container miniapp-card[\s\S]*?\.miniapp-card__tag-overflow--compact \{\s*display: inline-flex;/);
+  });
+
   it('bounds market cards while preserving the media preview ratio', () => {
     const source = readRelative('../views/MiniAppMarketView.tsx');
     const stylesheet = readRelative('../views/MiniAppMarketView.scss');

src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss

@@ -190,12 +190,12 @@
 
   &__tags {
     display: flex;
-    grid-column: 1;
+    flex: 1 1 auto;
     align-items: center;
     min-width: 0;
-    flex-wrap: nowrap;
+    max-width: 100%;
+    flex-wrap: wrap;
     gap: $size-gap-1;
-    overflow: hidden;
   }
 
   &__tag,
@@ -217,7 +217,11 @@
   }
 
   &__tag {
-    flex: 0 1 auto;
+    // Keep pills from shrinking; bound long labels and ellipsize their text.
+    display: block;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    max-width: min(100%, 16ch);
   }
 
   &__tag-overflow {
@@ -229,9 +233,10 @@
   }
 
   &__footer {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: end;
+    // Let actions wrap instead of taking width away from the tag labels.
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
     gap: $size-gap-2;
     width: 100%;
     padding-top: $size-gap-2;
@@ -245,7 +250,7 @@
 
   &__actions {
     display: flex;
-    grid-column: 2;
+    margin-inline-start: auto;
     align-items: center;
     gap: $size-gap-1;
     flex-shrink: 0;