diff --git a/frontend/src/lib/shared/primitives/DistributionBar.svelte.test.ts b/frontend/src/lib/shared/primitives/DistributionBar.svelte.test.ts
new file mode 100644
index 00000000..a796c08c
--- /dev/null
+++ b/frontend/src/lib/shared/primitives/DistributionBar.svelte.test.ts
@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import DistributionBar from './DistributionBar.svelte';
+
+afterEach(cleanup);
+
+describe('DistributionBar — total=0 branch', () => {
+	it('shows 0% / 0% widths when both counts are zero (avoids NaN)', async () => {
+		render(DistributionBar, {
+			outCount: 0,
+			inCount: 0,
+			senderName: 'Anna',
+			receiverName: 'Bert'
+		});
+
+		const segments = document.querySelectorAll('[data-testid="dist-bar-segment"]');
+		expect(segments).toHaveLength(2);
+		expect((segments[0] as HTMLElement).style.width).toBe('0%');
+		expect((segments[1] as HTMLElement).style.width).toBe('100%');
+	});
+
+	it('shows 100% / 0% widths when only outCount is non-zero', async () => {
+		render(DistributionBar, {
+			outCount: 5,
+			inCount: 0,
+			senderName: 'Anna',
+			receiverName: 'Bert'
+		});
+
+		const segments = document.querySelectorAll('[data-testid="dist-bar-segment"]');
+		expect((segments[0] as HTMLElement).style.width).toBe('100%');
+		expect((segments[1] as HTMLElement).style.width).toBe('0%');
+	});
+});