fix(frontend): short hour labels so the buttons do not wrap

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/Settings.test.tsx

@@ -241,7 +241,7 @@ describe("Settings", () => {
       const fetch = await open();
 
       expect(screen.getByRole("status").textContent).toBe("45 °C");
-      expect(screen.getByRole("button", { name: "2 godz." })).toHaveAttribute("aria-pressed", "true");
+      expect(screen.getByRole("button", { name: "2 h" })).toHaveAttribute("aria-pressed", "true");
       expect(screen.getByText(paragraph("Ciepła woda do 45 °C przez 2 godz., potem wróci 8 °C."))).toBeInTheDocument();
       await userEvent.click(screen.getByRole("button", { name: "Podgrzej wodę" }));
 
@@ -253,8 +253,8 @@ describe("Settings", () => {
       const fetch = await open();
 
       await userEvent.click(screen.getByLabelText("Mniej: Ciepła woda – oszczędnie"));
-      await userEvent.click(screen.getByRole("button", { name: "4 godz." }));
-      expect(screen.getByRole("button", { name: "2 godz." })).toHaveAttribute("aria-pressed", "false");
+      await userEvent.click(screen.getByRole("button", { name: "4 h" }));
+      expect(screen.getByRole("button", { name: "2 h" })).toHaveAttribute("aria-pressed", "false");
       expect(screen.getByText(paragraph("Ciepła woda do 44 °C przez 4 godz., potem wróci 8 °C."))).toBeInTheDocument();
       await userEvent.click(screen.getByRole("button", { name: "Podgrzej wodę" }));
 

frontend/src/Settings.tsx

@@ -197,7 +197,7 @@ function TimedForm({ data, preset, hp, busy, onCancel, onConfirm }: {
       <p className="mt-4 mb-2 font-semibold">Na jak długo</p>
       <div className="mb-4 grid grid-cols-4 gap-2">
         {PRESET_HOURS.map((h) => (
-          <Button key={h} aria-pressed={h === hours} disabled={busy} onClick={() => setHours(h)}>{duration(h)}</Button>
+          <Button key={h} aria-pressed={h === hours} disabled={busy} onClick={() => setHours(h)}>{h} h</Button>
         ))}
       </div>
       <div className="flex gap-3">