diff --git a/web/src/app/globals.css b/web/src/app/globals.css index e6d91b1..f0e26dc 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -353,6 +353,11 @@ body.cipherbid-root ::selection { } /* Compatibility layer for immutable live transaction components. */ +.cipherbid-auction-page [class*='lg:col-span-7'], +.cipherbid-auction-page [class*='lg:col-span-5'] { + min-width: 0; +} + .cipherbid-root [class*='text-[#a8b1ff]'], .cipherbid-root [class*='text-[#d7dcff]'], .cipherbid-root [class*='text-[#aee5c1]'], diff --git a/web/src/features/auction/ui/AtomicDeliveryReceipt.tsx b/web/src/features/auction/ui/AtomicDeliveryReceipt.tsx index 7c8fbb1..fb2be3d 100644 --- a/web/src/features/auction/ui/AtomicDeliveryReceipt.tsx +++ b/web/src/features/auction/ui/AtomicDeliveryReceipt.tsx @@ -93,10 +93,10 @@ export function AtomicDeliveryReceipt({ target="_blank" rel="noreferrer" aria-label={`${receipt.label} ${receipt.transactionHash}`} - className="cb-control flex min-h-11 flex-wrap items-center justify-between gap-2 px-3 text-sm" + className="cb-control flex min-h-11 min-w-0 flex-wrap items-center justify-between gap-2 overflow-hidden px-3 text-sm" > - {receipt.label} - + {receipt.label} + {receipt.transactionHash} · block {receipt.blockNumber} diff --git a/web/tests/unit/AtomicDeliveryReceipt.test.tsx b/web/tests/unit/AtomicDeliveryReceipt.test.tsx index c9842e0..5592950 100644 --- a/web/tests/unit/AtomicDeliveryReceipt.test.tsx +++ b/web/tests/unit/AtomicDeliveryReceipt.test.tsx @@ -46,4 +46,20 @@ describe('AtomicDeliveryReceipt', () => { expect(screen.getByText('No verified transaction receipts yet.')).toBeInTheDocument() expect(screen.queryByRole('link')).not.toBeInTheDocument() }) + + it('wraps a full transaction hash inside its receipt card', () => { + const transactionHash = `0x${'f'.repeat(64)}` + render( + , + ) + + expect(screen.getByRole('link', { name: `Settlement ${transactionHash}` })).toHaveClass( + 'min-w-0', + 'overflow-hidden', + ) + expect(screen.getByText(`${transactionHash} · block 77`)).toHaveClass('min-w-0', 'break-all') + }) }) diff --git a/web/tests/unit/designTasteSystem.test.ts b/web/tests/unit/designTasteSystem.test.ts index 8eb30fb..b61563c 100644 --- a/web/tests/unit/designTasteSystem.test.ts +++ b/web/tests/unit/designTasteSystem.test.ts @@ -34,6 +34,14 @@ describe('CipherBid Taste visual system', () => { expect(layout).toContain('className="cipherbid-root"') }) + it('allows live auction grid columns to shrink around scrollable evidence', () => { + const css = source('src/app/globals.css') + + expect(css).toMatch( + /\.cipherbid-auction-page \[class\*='lg:col-span-7'\],\s*\.cipherbid-auction-page \[class\*='lg:col-span-5'\] \{\s*min-width: 0;/, + ) + }) + it('removes the old purple design literals from the redesigned surface', () => { for (const relativePath of sourceFiles.filter((value) => value !== 'src/app/globals.css')) { expect(source(relativePath), relativePath).not.toMatch(/#6654d9|#7170ff|#a8b1ff/i)