chore(release): v2.4.10 - mobile UX fixes (plan grid, Odin, toolbar)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "app-ts",
-  "version": "2.4.6",
+  "version": "2.4.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "app-ts",
-      "version": "2.4.6",
+      "version": "2.4.10",
       "license": "ISC",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.102.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-ts",
-  "version": "2.4.6",
+  "version": "2.4.10",
   "description": "",
   "main": "dist/server.js",
   "scripts": {

src/admin/components/PlanGrid.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import type { CSSProperties } from "react";
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import Box from "@mui/material/Box";
 import {
   GridData,
@@ -11,7 +12,8 @@ import {
 } from "../lib/queries/plan";
 import type { Project } from "../lib/queries/projects";
 import PlanRangeChips from "./PlanRangeChips";
-import { LoadingState } from "../ui";
+import { LoadingState, Select, Field } from "../ui";
+import { useAuth } from "../context/AuthContext";
 import { fonts } from "../theme";
 
 /**
@@ -30,7 +32,10 @@ const PlanGridRoot = styled(Box)(({ theme }) => ({
   border: `1px solid ${theme.vars!.palette.divider}`,
   borderRadius: 14,
   boxShadow: theme.shadows[2],
-  maxHeight: "calc(100dvh - 240px)",
+  // Never collapse below ~5 rows: on a phone in LANDSCAPE 100dvh is only
+  // ~360-400px, so the bare calc left <160px and the cells disappeared
+  // under the sticky header. The grid scrolls internally either way.
+  maxHeight: "max(calc(100dvh - 240px), 360px)",
   isolation: "isolate",
 
   "& .plan-grid": {
@@ -464,6 +469,15 @@ export default function PlanGrid({
   pulseKey,
   onCellClick,
 }: Props) {
+  const theme = useTheme();
+  // Phone layout: the multi-person grid doesn't fit a portrait viewport, so
+  // a person picker shows ONE column at a time (Datum + selected person).
+  // Desktop/tablet keeps all columns.
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const { user: authUser } = useAuth();
+  // null = "no explicit choice yet" → defaults to the logged-in user when
+  // they are in the plan, else the first person.
+  const [mobileUserId, setMobileUserId] = useState<number | null>(null);
   const today = useMemo(() => todayIso(), []);
   const catMap = useMemo(() => categoryMap(categories), [categories]);
   // Index projects by id once per projects change instead of a linear
@@ -483,7 +497,15 @@ export default function PlanGrid({
   );
 
   if (!data) return <LoadingState />;
-  const users = data.users;
+  const allUsers = data.users;
+  // Mobile: narrow to the picked person (derived, not stored — a stale pick
+  // after the user list changes falls back gracefully).
+  const mobileUser =
+    allUsers.find((u) => u.id === mobileUserId) ??
+    allUsers.find((u) => u.id === authUser?.id) ??
+    allUsers[0];
+  const users =
+    isMobile && allUsers.length > 1 && mobileUser ? [mobileUser] : allUsers;
   // pulseKey?.nonce is included in the data-pulse attribute so a second
   // mutation on the same cell re-triggers the animation (CSS animations
   // don't restart unless the keyframe applies to a fresh element/class
@@ -493,156 +515,172 @@ export default function PlanGrid({
     : undefined;
 
   return (
-    <PlanGridRoot data-pulse={pulseAttr}>
+    <>
-      <table className="plan-grid">
+      {isMobile && allUsers.length > 1 && (
-        {/* The colgroup is what actually controls column width in a
+        <Box sx={{ mb: 1.5 }}>
+          <Field label="Osoba">
+            <Select
+              value={String(mobileUser?.id ?? "")}
+              onChange={(value) => setMobileUserId(Number(value))}
+              options={allUsers.map((u) => ({
+                value: String(u.id),
+                label: u.full_name,
+              }))}
+            />
+          </Field>
+        </Box>
+      )}
+      <PlanGridRoot data-pulse={pulseAttr}>
+        <table className="plan-grid">
+          {/* The colgroup is what actually controls column width in a
             table — `min-width` on `<th>`/`<td>` is just a floor that
             `table-layout: auto` happily blows past. The first column
             gets a fixed width via the col element so the date stamp
             doesn't get stretched to share space with person columns. */}
-        <colgroup>
+          <colgroup>
-          <col className="plan-grid-date-col" />
+            <col className="plan-grid-date-col" />
-          {users.map((u) => (
+            {users.map((u) => (
-            <col key={u.id} />
+              <col key={u.id} />
-          ))}
+            ))}
-        </colgroup>
+          </colgroup>
-        <thead>
+          <thead>
-          <tr>
+            <tr>
-            <th className="plan-grid-date-col">Datum</th>
+              <th className="plan-grid-date-col">Datum</th>
-            {users.map((u) => {
+              {users.map((u) => {
-              const { first, last } = splitName(u.full_name);
+                const { first, last } = splitName(u.full_name);
-              return (
+                return (
-                <th key={u.id}>
+                  <th key={u.id}>
-                  <span className="plan-person-head">
+                    <span className="plan-person-head">
-                    <span className="plan-person-dot" aria-hidden />
+                      <span className="plan-person-dot" aria-hidden />
-                    <span className="plan-person-name">
+                      <span className="plan-person-name">
-                      <strong title={u.full_name}>
+                        <strong title={u.full_name}>
-                        {first}
+                          {first}
-                        {last ? ` ${last}` : ""}
+                          {last ? ` ${last}` : ""}
-                      </strong>
+                        </strong>
-                      {shortRole(u.role_name) && (
+                        {shortRole(u.role_name) && (
-                        <small>{shortRole(u.role_name)}</small>
+                          <small>{shortRole(u.role_name)}</small>
-                      )}
+                        )}
+                      </span>
                     </span>
-                  </span>
+                  </th>
-                </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {days.map((date) => {
+              const dow = czechWeekday(date);
+              const dayNum = date.slice(8, 10);
+              const isToday = date === today;
+              const trCls = [
+                isWeekend(date) ? "plan-grid-weekend" : "",
+                isToday ? "is-today" : "",
+              ]
+                .filter(Boolean)
+                .join(" ");
+              return (
+                <tr key={date} className={trCls}>
+                  <td className="plan-grid-date-col">
+                    <span className="plan-date-stamp">
+                      <span className="plan-date-daynum">{dayNum}</span>
+                      <span className="plan-date-dow">{dow}</span>
+                    </span>
+                  </td>
+                  {users.map((u) => {
+                    const cellArr = data.cells[u.id]?.[date] ?? [];
+                    const cell = cellArr[0] ?? null;
+                    const past = isPastDate(date, today);
+                    // Past-day cells are read-only in the UI: an empty past
+                    // cell is non-interactive (no create modal, no "+" hint),
+                    // a past cell with data opens in view mode only. The
+                    // server still enforces the past-date rule with a 403
+                    // (defense in depth), but the click path here never
+                    // reaches a create/edit submission for a past date.
+                    const isLocked = !canEdit || past;
+                    // `isPulsing` is true for the single (user, date) cell
+                    // that the most recent successful mutation touched.
+                    // CSS restarts the keyframe animation whenever the
+                    // `nonce` changes (we embed it in data-pulse on the
+                    // wrapper, see above), so back-to-back mutations on the
+                    // same cell re-trigger the pulse.
+                    const isPulsing =
+                      !!pulseKey &&
+                      pulseKey.userId === u.id &&
+                      pulseKey.date === date;
+                    let cls: string;
+                    if (cell) {
+                      cls = isLocked
+                        ? `plan-cell plan-cell--readonly${past ? " plan-cell--past" : ""}`
+                        : "plan-cell";
+                    } else {
+                      cls = isLocked
+                        ? `plan-cell plan-cell--empty plan-cell--readonly${past ? " plan-cell--past" : ""}`
+                        : "plan-cell plan-cell--empty";
+                    }
+                    if (isPulsing) cls += " plan-cell--pulse";
+                    return (
+                      <td key={u.id}>
+                        <button
+                          type="button"
+                          className={cls}
+                          style={
+                            cell
+                              ? ({
+                                  "--cat-color": catMap[cell.category]?.color,
+                                } as CSSProperties)
+                              : undefined
+                          }
+                          onClick={() => onCellClick(u.id, date, cellArr)}
+                          aria-label={
+                            cell
+                              ? cellArr.length === 1
+                                ? `${u.full_name}, ${date}, ${planCategoryLabel(cell.category, catMap)}`
+                                : `${u.full_name}, ${date}, ${cellArr.length} záznamy`
+                              : isLocked
+                                ? `${u.full_name}, ${date}, ${past ? "uplynulý den" : "prázdné"} — bez záznamu`
+                                : `${u.full_name}, ${date}, prázdné — přidat záznam`
+                          }
+                        >
+                          {cellArr.map((c, i) => (
+                            <Box
+                              key={
+                                c.entryId != null
+                                  ? c.entryId
+                                  : c.overrideId != null
+                                    ? `o${c.overrideId}`
+                                    : i
+                              }
+                              className="plan-cell-record"
+                              style={
+                                {
+                                  "--cat-color": catMap[c.category]?.color,
+                                } as CSSProperties
+                              }
+                            >
+                              <PlanRangeChips
+                                cell={c}
+                                project={
+                                  c.project_id
+                                    ? (projectMap.get(c.project_id) ?? null)
+                                    : null
+                                }
+                                categoryLabel={planCategoryLabel(
+                                  c.category,
+                                  catMap,
+                                )}
+                              />
+                            </Box>
+                          ))}
+                        </button>
+                      </td>
+                    );
+                  })}
+                </tr>
               );
             })}
-          </tr>
+          </tbody>
-        </thead>
+        </table>
-        <tbody>
+      </PlanGridRoot>
-          {days.map((date) => {
+    </>
-            const dow = czechWeekday(date);
-            const dayNum = date.slice(8, 10);
-            const isToday = date === today;
-            const trCls = [
-              isWeekend(date) ? "plan-grid-weekend" : "",
-              isToday ? "is-today" : "",
-            ]
-              .filter(Boolean)
-              .join(" ");
-            return (
-              <tr key={date} className={trCls}>
-                <td className="plan-grid-date-col">
-                  <span className="plan-date-stamp">
-                    <span className="plan-date-daynum">{dayNum}</span>
-                    <span className="plan-date-dow">{dow}</span>
-                  </span>
-                </td>
-                {users.map((u) => {
-                  const cellArr = data.cells[u.id]?.[date] ?? [];
-                  const cell = cellArr[0] ?? null;
-                  const past = isPastDate(date, today);
-                  // Past-day cells are read-only in the UI: an empty past
-                  // cell is non-interactive (no create modal, no "+" hint),
-                  // a past cell with data opens in view mode only. The
-                  // server still enforces the past-date rule with a 403
-                  // (defense in depth), but the click path here never
-                  // reaches a create/edit submission for a past date.
-                  const isLocked = !canEdit || past;
-                  // `isPulsing` is true for the single (user, date) cell
-                  // that the most recent successful mutation touched.
-                  // CSS restarts the keyframe animation whenever the
-                  // `nonce` changes (we embed it in data-pulse on the
-                  // wrapper, see above), so back-to-back mutations on the
-                  // same cell re-trigger the pulse.
-                  const isPulsing =
-                    !!pulseKey &&
-                    pulseKey.userId === u.id &&
-                    pulseKey.date === date;
-                  let cls: string;
-                  if (cell) {
-                    cls = isLocked
-                      ? `plan-cell plan-cell--readonly${past ? " plan-cell--past" : ""}`
-                      : "plan-cell";
-                  } else {
-                    cls = isLocked
-                      ? `plan-cell plan-cell--empty plan-cell--readonly${past ? " plan-cell--past" : ""}`
-                      : "plan-cell plan-cell--empty";
-                  }
-                  if (isPulsing) cls += " plan-cell--pulse";
-                  return (
-                    <td key={u.id}>
-                      <button
-                        type="button"
-                        className={cls}
-                        style={
-                          cell
-                            ? ({
-                                "--cat-color": catMap[cell.category]?.color,
-                              } as CSSProperties)
-                            : undefined
-                        }
-                        onClick={() => onCellClick(u.id, date, cellArr)}
-                        aria-label={
-                          cell
-                            ? cellArr.length === 1
-                              ? `${u.full_name}, ${date}, ${planCategoryLabel(cell.category, catMap)}`
-                              : `${u.full_name}, ${date}, ${cellArr.length} záznamy`
-                            : isLocked
-                              ? `${u.full_name}, ${date}, ${past ? "uplynulý den" : "prázdné"} — bez záznamu`
-                              : `${u.full_name}, ${date}, prázdné — přidat záznam`
-                        }
-                      >
-                        {cellArr.map((c, i) => (
-                          <Box
-                            key={
-                              c.entryId != null
-                                ? c.entryId
-                                : c.overrideId != null
-                                  ? `o${c.overrideId}`
-                                  : i
-                            }
-                            className="plan-cell-record"
-                            style={
-                              {
-                                "--cat-color": catMap[c.category]?.color,
-                              } as CSSProperties
-                            }
-                          >
-                            <PlanRangeChips
-                              cell={c}
-                              project={
-                                c.project_id
-                                  ? (projectMap.get(c.project_id) ?? null)
-                                  : null
-                              }
-                              categoryLabel={planCategoryLabel(
-                                c.category,
-                                catMap,
-                              )}
-                            />
-                          </Box>
-                        ))}
-                      </button>
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </PlanGridRoot>
   );
 }

src/admin/components/odin/OdinChat.tsx

@@ -422,7 +422,12 @@ export default function OdinChat() {
   return (
     <Box
       sx={{
-        height: "calc(100dvh - 100px)",
+        // svh (NOT dvh): dvh grows live as the mobile URL bar collapses, so a
+        // dvh-sized full-height layout always lets the page scroll by the
+        // browser-chrome height. svh sizes for the bar-visible viewport — the
+        // page never scrolls and the chat's message list scrolls internally.
+        // Desktop: svh === vh.
+        height: "calc(100svh - 100px)",
         display: "flex",
         border: 1,
         borderColor: "divider",

src/admin/pages/InvoiceDetail.tsx

@@ -1163,7 +1163,16 @@ export default function InvoiceDetail() {
               mb: 3,
             }}
           >
-            <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+            {/* flexWrap: long document titles must drop below the Zpět button
+                on phones instead of overflowing the viewport. */}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                flexWrap: "wrap",
+              }}
+            >
               <Button
                 component={RouterLink}
                 to="/invoices?tab=issued"
@@ -1724,7 +1733,16 @@ export default function InvoiceDetail() {
             mb: 3,
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          {/* flexWrap: long document titles must drop below the Zpět button
+              on phones instead of overflowing the viewport. */}
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              flexWrap: "wrap",
+            }}
+          >
             <Button
               component={RouterLink}
               to="/invoices?tab=issued"

src/admin/pages/IssuedOrderDetail.tsx

@@ -573,7 +573,16 @@ export default function IssuedOrderDetail() {
           mb: 3,
         }}
       >
-        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+        {/* flexWrap: long document titles must drop below the Zpět button on
+            phones instead of overflowing the viewport. */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            flexWrap: "wrap",
+          }}
+        >
           <Button
             component={RouterLink}
             to="/orders?tab=vydane"

src/admin/pages/OfferDetail.tsx

@@ -620,7 +620,16 @@ export default function OfferDetail() {
             mb: 3,
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          {/* flexWrap: long document titles must drop below the Zpět button
+              on phones instead of overflowing the viewport. */}
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              flexWrap: "wrap",
+            }}
+          >
             <Button
               component={RouterLink}
               to="/offers"

src/admin/pages/PlanWork.tsx

@@ -667,19 +667,29 @@ export default function PlanWork() {
         </Box>
       )}
 
+      {/* Mobile: stacked full-width rows (same pattern as headerActionsSx on
+          the detail pages); sm+ keeps the single wrapping toolbar row. The
+          paired controls (Dnes/arrows, Týden/Měsíc) stay together as one
+          full-width row each. */}
       <Box
         sx={{
           display: "flex",
-          flexWrap: "wrap",
+          flexDirection: { xs: "column", sm: "row" },
-          alignItems: "center",
+          flexWrap: { sm: "wrap" },
+          alignItems: { xs: "stretch", sm: "center" },
           gap: 1.5,
           mb: 2,
         }}
       >
         {/* Nav buttons grouped so they stay on one row when the toolbar
               wraps on mobile. */}
-        <Box sx={{ display: "inline-flex", gap: 1 }}>
+        <Box sx={{ display: "flex", gap: 1 }}>
-          <Button variant="outlined" color="inherit" onClick={goToToday}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            onClick={goToToday}
+            sx={{ flex: { xs: 1, sm: "0 0 auto" } }}
+          >
             Dnes
           </Button>
           <Button
@@ -701,8 +711,8 @@ export default function PlanWork() {
         </Box>
         <Box
           sx={{
-            flex: 1,
+            flex: { sm: 1 },
-            minWidth: 220,
+            minWidth: { sm: 220 },
             display: "flex",
             justifyContent: "center",
           }}
@@ -727,7 +737,11 @@ export default function PlanWork() {
         <Box
           role="group"
           aria-label="Měřítko zobrazení"
-          sx={{ display: "inline-flex", gap: 1 }}
+          sx={{
+            display: "flex",
+            gap: 1,
+            "& > button": { flex: { xs: 1, sm: "0 0 auto" } },
+          }}
         >
           <Button
             variant={view === "week" ? "contained" : "outlined"}

src/admin/theme.ts

@@ -58,7 +58,13 @@ export const theme = createTheme({
     h1: { fontFamily: FONT_HEADING, fontWeight: 800 },
     h2: { fontFamily: FONT_HEADING, fontWeight: 800 },
     h3: { fontFamily: FONT_HEADING, fontWeight: 800 },
-    h4: { fontFamily: FONT_HEADING, fontWeight: 700 },
+    h4: {
+      fontFamily: FONT_HEADING,
+      fontWeight: 700,
+      // Page/detail headlines: MUI's default 2.125rem overflows phone
+      // viewports (long document titles + number). Scale down on xs only.
+      "@media (max-width:600px)": { fontSize: "1.5rem" },
+    },
     h5: { fontFamily: FONT_HEADING, fontWeight: 700 },
     h6: { fontFamily: FONT_HEADING, fontWeight: 700 },
     button: { textTransform: "none", fontWeight: 600 },

src/main.tsx

@@ -4,6 +4,22 @@ import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 import { ThemeProvider } from "./context/ThemeContext";
 
+// Deploy-skew recovery (official Vite mechanism): after a release the old
+// hashed chunks are deleted, so a tab still running the previous build fails
+// its next lazy-page import. Vite emits `vite:preloadError` for exactly this —
+// swallow the error and reload once, which loads the fresh index.html and new
+// chunk names. The timestamp guard prevents a reload loop when a chunk is
+// genuinely unloadable (e.g. offline): a second failure within 10 s falls
+// through to the normal error path.
+window.addEventListener("vite:preloadError", (event) => {
+  const KEY = "vite-preload-reloaded-at";
+  const last = Number(sessionStorage.getItem(KEY) || 0);
+  if (Date.now() - last < 10_000) return;
+  sessionStorage.setItem(KEY, String(Date.now()));
+  event.preventDefault();
+  window.location.reload();
+});
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter

src/server.ts

@@ -206,12 +206,35 @@ async function start() {
       root: path.join(__dirname, "..", "dist-client"),
       prefix: "/",
       wildcard: false,
+      // The plugin's own Cache-Control management must be OFF or it
+      // overwrites the setHeaders values below with "public, max-age=0"
+      // (README: "To provide a custom Cache-Control header, set this option
+      // to false"). ETags stay on, so no-cache still revalidates cheaply.
+      cacheControl: false,
+      // Deploy-skew caching contract (per the Vite deploy guide):
+      // - /assets/* names are content-hashed → safe to cache forever
+      //   (a changed file always gets a NEW name, so "immutable" is correct).
+      // - index.html (and any non-hashed file) must always be revalidated,
+      //   otherwise a cached copy keeps referencing deleted old chunks.
+      setHeaders: (res, filePath) => {
+        if (filePath.includes(`${path.sep}assets${path.sep}`)) {
+          res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+        } else {
+          res.setHeader("Cache-Control", "no-cache");
+        }
+      },
     });
 
     app.setNotFoundHandler((request, reply) => {
       if (request.url.startsWith("/api/")) {
         return reply.status(404).send({ success: false, error: "Not found" });
       }
+      // A missing hashed asset (old chunk after a deploy) must 404, NOT get
+      // the SPA index.html fallback — HTML-as-JS masks the failure and breaks
+      // the client's vite:preloadError reload recovery.
+      if (request.url.startsWith("/assets/")) {
+        return reply.status(404).send();
+      }
       return reply.sendFile("index.html");
     });
   }