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.9",
+  "version": "2.4.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "app-ts",
-      "version": "2.4.9",
+      "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.9",
+  "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/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"}