Grow the H2C nozzle rack with the printer card size

    The six rack chips were a hard-coded 28 pixels at every card size, while
    the body type and icons around them scale by 20% at L and 40% at XL. Set
    the card larger and the rack stayed put -- a shrunken strip beside
    neighbours that had grown around it, with the diameter figures pressing
    against the edges of chips that had not moved.

    The chips now read their size from the same scale as everything else,
    which needed one new rung: the icon tokens run in quarter-rem steps (i2
    is 8px, i3 12, i4 16, i5 20), so 28px is i7. S and M are unchanged, as
    they are for every other property that control scales.

    The card is sized to its contents, so it simply takes the extra width
    rather than being told a new one -- and at L and XL that row has the room
    to give, so the temperature readings beside it do not go back to wrapping.

    Two tests: one pins i7 to 33.6px at L and adds it to the sweep asserting
    every token is set at XL, the other asserts the chip reads the token, so
    a revert to a fixed class fails rather than silently regressing.

frontend/src/__tests__/pages/PrintersPage.test.tsx

@@ -840,6 +840,29 @@ describe('PrintersPage', () => {
       expect(numbers).toEqual(['1', '2', '3', '4', '5', '6']);
     });
 
+    it('sizes the rack chips from the card scale rather than a fixed 28px', async () => {
+      // The chips were hard-coded while the type and icons around them grow
+      // with the card size, so at L and XL the rack read as a shrunken strip
+      // next to neighbours that had grown by up to 40%.
+      server.use(
+        http.get('/api/v1/printers/:id/status', () => {
+          return HttpResponse.json(h2cStatus);
+        })
+      );
+
+      render(<PrintersPage />);
+
+      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 chip = slotRow.querySelector('span[data-rack-diameter]')!.parentElement!;
+      expect(chip.className).toContain('w-[var(--pc-i7,28px)]');
+      expect(chip.className).toContain('h-[var(--pc-i7,28px)]');
+    });
+
     it('hides nozzle rack when only L/R nozzles present (H2D)', async () => {
       const h2dStatus = {
         ...mockPrinterStatus,

frontend/src/__tests__/pages/PrintersPageCardScale.test.tsx

@@ -185,6 +185,9 @@ describe('PrintersPage — printer card body scale (#1848)', () => {
     expect(style.getPropertyValue('--pc-t11')).toBe('13.2px');
     expect(style.getPropertyValue('--pc-i3')).toBe('14.4px');
     expect(style.getPropertyValue('--pc-i4')).toBe('19.2px');
+    // The H2C rack chips. They were a hard-coded 28px, so the rack read as a
+    // shrunken strip beside neighbours that had grown 20%.
+    expect(style.getPropertyValue('--pc-i7')).toBe('33.6px');
   });
 
   it('scales further at XL, where the card is full width', async () => {
@@ -195,7 +198,8 @@ describe('PrintersPage — printer card body scale (#1848)', () => {
     // Every property is set at every size, so a converted class can never
     // fall through to its fallback while sitting inside a card.
     for (const name of ['--pc-t8', '--pc-t9', '--pc-t10', '--pc-t11',
-      '--pc-i2', '--pc-i25', '--pc-i3', '--pc-i35', '--pc-i4', '--pc-i5']) {
+      '--pc-i2', '--pc-i25', '--pc-i3', '--pc-i35', '--pc-i4', '--pc-i5',
+      '--pc-i7']) {
       expect(style.getPropertyValue(name)).not.toBe('');
     }
   });

frontend/src/pages/PrintersPage.tsx

@@ -556,10 +556,11 @@ 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.
+    // width at any one card size, so extra width would be 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.
     <div className="text-center px-2.5 py-1.5 bg-bambu-dark rounded-lg flex-[0_1_auto] flex flex-col justify-center">
       <p className="text-[length:var(--pc-t9,9px)] text-bambu-gray mb-1">{t('printers.nozzleRack')}</p>
       <div className="flex gap-[3px] justify-center">
@@ -572,7 +573,7 @@ function NozzleRackCard({ slots, filamentInfo }: { slots: import('../api/client'
             <NozzleSlotHoverCard key={slot.id >= 0 ? slot.id : `empty-${i}`} slot={slot} index={i} filamentName={slot.filament_id ? filamentInfo?.[slot.filament_id]?.name : undefined}>
               <div className="flex flex-col items-center gap-0.5">
                 <div
-                  className={`w-7 h-7 rounded flex items-center justify-center cursor-default transition-colors border-b-2 ${
+                  className={`w-[var(--pc-i7,28px)] h-[var(--pc-i7,28px)] rounded flex items-center justify-center cursor-default transition-colors border-b-2 ${
                     isEmpty
                       ? 'bg-bambu-dark-tertiary/20 border-bambu-dark-tertiary/20'
                       : 'bg-bambu-dark-tertiary/40 border-bambu-dark-tertiary/40'
@@ -589,8 +590,9 @@ function NozzleRackCard({ slots, filamentInfo }: { slots: import('../api/client'
                 </div>
                 {/* 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. */}
+                    than inside it: the chip is barely wider than its own
+                    diameter text and already carries that over a
+                    filament-coloured background. */}
                 <span className="text-[length:var(--pc-t8,8px)] leading-none tabular-nums text-bambu-gray/70">
                   {i + 1}
                 </span>
@@ -1834,6 +1836,7 @@ function buildCardScaleStyle(cardSize: number): React.CSSProperties {
     '--pc-i35': px(14),
     '--pc-i4': px(16),
     '--pc-i5': px(20),
+    '--pc-i7': px(28),
   } as React.CSSProperties;
 }
 

static/index.html

@@ -26,8 +26,8 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-CiO0qpbC.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B3n6Lnj1.css">
+    <script type="module" crossorigin src="/assets/index-BKSFEuQA.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-n0K-Bu3y.css">
   </head>
   <body>
     <div id="root"></div>