fix: improve responsive worklog table#574
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the responsiveness and localization of the tracking table. Key changes include replacing the binary search for table fitting with a robust linear scan, introducing compact date formatting based on user preferences (locale or custom patterns) instead of using weekday names, adding icon-based column headers for date and actions on narrow screens, and reordering row actions. Feedback focuses on optimizing performance by caching Intl.DateTimeFormat instances in compactDateByLocale and simplifying the table-fitting loop to eliminate a redundant function call.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #574 +/- ##
=========================================
Coverage 82.14% 82.14%
Complexity 3378 3378
=========================================
Files 241 241
Lines 9210 9210
=========================================
Hits 7566 7566
Misses 1644 1644
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
CybotTM
force-pushed
the
agent/responsive-worklog-table
branch
from
93f03f6 to
116f99b
Compare
Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
Extract the ad-hoc worklog screenshot capture into a documented, reusable CLI (e2e/tools/capture-screenshots.mjs) exposed via the npm "screenshots" script. Logs in with the E2E defaults, waits for the target selector, and captures desktop/reduced viewport PNGs against the running stack. Documented in docs/testing.md. Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Route the screenshot helper's login defaults through an envOr() indirection, mirroring e2e/helpers/auth.ts, so no password literal is assigned directly to a credential field (clears SonarCloud javascript:S2068). The defaults remain the public LDAP test fixtures. Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
The previous screenshots were rendered from a temporary mocked table harness with fabricated demo data, so their EntryClass border cues were wrong (red/teal on the wrong rows). Recapture the real /ui/tracking page from the running e2e stack via e2e/tools/capture-screenshots.mjs, where the borders reflect the backend's actual class computation: grey PAUSE on a gapped entry and teal DAYBREAK on the day's first entry. Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
The compact worklog date rungs mixed one- and two-digit fields (5.1. vs 10.1.) and flipped field order between rungs (ISO month-first 01-15 for the mid rung vs locale day-first for the short rung), which is hard to scan down the column. Collapse the two compact rungs into one always-zero-padded, locale-ordered two-digit day+month (05.01. / 15.01.) and drop the now-dead non-padded/numeric format branches. Refs #520. Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
There was a problem hiding this comment.
Pull request overview
This PR improves the responsiveness and usability of the worklog table on /ui/tracking, addressing issues around compact date readability (#520) and action/icon clarity (#571), and adds a small helper to capture real-stack screenshots for documentation/debugging.
Changes:
- Replace the previous multi-rung date “ladder” with a compact, zero-padded day+month format and add accessible icon headers at reduced widths.
- Keep row action ordering stable (Info before optional Prolong) and update the Info icon to be visually distinct.
- Replace the binary-search thinning fit logic with a direct scan and add a Playwright-based screenshot capture helper + docs.
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds a screenshots script to run the new capture helper. |
| frontend/src/styles/app.css | Updates responsive thinning CSS (compact date rung + icon headers). |
| frontend/src/pages/Tracking.tsx | Implements compact date formatting, icon headers, action ordering, and revised fit loop. |
| frontend/src/pages/Tracking.test.tsx | Updates/extends tests for compact dates, headers accessibility, and action ordering. |
| frontend/src/lib/icons.tsx | Updates Info glyph and adds Calendar/Tools header icons. |
| e2e/tools/capture-screenshots.mjs | New CLI helper for capturing screenshots from a running e2e stack. |
| docs/testing.md | Documents how to run the screenshot helper. |
- Use displayDate() for the date <td> title instead of dateParts().full, so the tooltip does not recompute the compact-date Intl formatting. - Match the shared .visually-hidden recipe (margin/padding reset) on the responsive th-label hiding rule. Signed-off-by: Sebastian Mendel <github@sebastianmendel.de>
|
Related issues
Fixes #520
Fixes #571
Refs #572
Summary
showing an always two-digit day+month in the active locale/user order
(
05.01./15.01.), instead of a ragged mix (5.1.vs10.1.) or a rungthat flipped field order (ISO month-first
01-15vs locale day-first).Intl.DateTimeFormatinstance and simplify the fit loop.Screenshots
Captured from the real running e2e stack (
/ui/tracking, useri.myself) viae2e/tools/capture-screenshots.mjs— not a mock harness.At reduced width the Date column compacts to a two-digit
day.month(15.01.), the main navcollapses to a
Mehrmenu, and the responsive thinning levels apply — the fix for #520.The EntryClass border cues reflect the backend's actual class computation
(
BaseTrackingController::calculateClasses): grey Pause on an entry with a gap before it,teal Tageswechsel on a day's first entry, red Zeitüberschneidung on overlaps.
Note on the seed data (why the list spans 2024→2026)
These captures use the e2e seed, whose clock is frozen at
2024-01-15while the fixture alsocontains future-dated (2026) entries, and
i.myselfhasshow_future = 1.getEntriesByUserreturns
day >= today − Nwith no upper bound when show_future is set, so every future entryappears regardless of the "N days" window — hence multiple calendar days show even at "3 Tage".
The seed also only classifies the 2024-01-15 day, so day-break cues are absent on the unclassified
2026 days. Both are pre-existing seed/behaviour artifacts, not changes in this PR (which only
touches the responsive table layout and the compact date format).
Validation
bun run test src/pages/Tracking.test.tsxpassed: 47/47.bun run lintandbun run typecheckpassed.bun run buildsucceeds and the SPA renders on the live e2e stack (port 8766).rgb(154,160,166), Tageswechselrgb(0,136,154)).Notes
npm run screenshots) was added and documented indocs/testing.md.harness; those had incorrect border cues and have been replaced with the real captures above.