diff --git a/frontend/src/__tests__/pages/PrintersPage.test.tsx b/frontend/src/__tests__/pages/PrintersPage.test.tsx
index 215fd93f4..7184dc9d6 100644
--- a/frontend/src/__tests__/pages/PrintersPage.test.tsx
+++ b/frontend/src/__tests__/pages/PrintersPage.test.tsx
@@ -812,10 +812,34 @@ describe('PrintersPage', () => {
const rackLabel = screen.getAllByText('Nozzle Rack')[0];
const rackCard = rackLabel.parentElement!;
const slotRow = rackCard.querySelectorAll('div.flex')[0];
- const slotTexts = Array.from(slotRow.querySelectorAll('span')).map(s => s.textContent);
+ // Match the diameter spans specifically — each chip also carries a slot
+ // number span, and a bare `span` sweep would interleave the two.
+ const slotTexts = Array.from(slotRow.querySelectorAll('span[data-rack-diameter]')).map(s => s.textContent);
expect(slotTexts).toEqual(['—', '0.2', '0.6', '0.8', '1.0', '1.2']);
});
+ it('labels every rack position 1..6 regardless of which nozzles are present', async () => {
+ // The numbering is positional, not a count of what is loaded: the empty
+ // position keeps its number so "the nozzle in slot 4" means the same
+ // thing whether or not slots 1..3 are occupied.
+ server.use(
+ http.get('/api/v1/printers/:id/status', () => {
+ return HttpResponse.json(h2cStatus);
+ })
+ );
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
+ });
+
+ const rackLabel = screen.getAllByText('Nozzle Rack')[0];
+ const slotRow = rackLabel.parentElement!.querySelectorAll('div.flex')[0];
+ const numbers = Array.from(slotRow.querySelectorAll('span:not([data-rack-diameter])')).map(s => s.textContent);
+ expect(numbers).toEqual(['1', '2', '3', '4', '5', '6']);
+ });
+
it('hides nozzle rack when only L/R nozzles present (H2D)', async () => {
const h2dStatus = {
...mockPrinterStatus,
diff --git a/frontend/src/pages/PrintersPage.tsx b/frontend/src/pages/PrintersPage.tsx
index 1e0885005..c56b0bd8d 100644
--- a/frontend/src/pages/PrintersPage.tsx
+++ b/frontend/src/pages/PrintersPage.tsx
@@ -555,7 +555,12 @@ function NozzleRackCard({ slots, filamentInfo }: { slots: import('../api/client'
);
return (
-
+ // Sized to its contents rather than growing: the six chips are a fixed
+ // 28px each, so any extra width is dead space taken from the temperature
+ // cards beside it — which are flex-1 with a 0 basis and wrap their values
+ // ("220° / 220°") as soon as they lose it. Shrink stays enabled so the
+ // card still gives way on a narrow printer card instead of overflowing.
+
+ {/* Physical rack position, so "swap the nozzle in slot 4" can be
+ acted on without counting chips. Sits below the chip rather
+ than inside it: the chip is 28px and already carries the
+ diameter over a filament-coloured background. */}
+
+ {i + 1}