mirror of
https://github.com/PerpetualSoftware/pad.git
synced 2026-10-03 12:10:31 +00:00
xarmian
a829d3a06d
* fix(web): ItemCard polish — nudge PR badge down, wrap long titles (BUG-1233)
Two small fixes on the item card:
1. PR badge vertical position: top: -6px → 8px. The previous offset
pushed the badge above the card edge; 8px sits the pill comfortably
inside the top of the card while keeping the right: -6px overhang
(sticker-on-edge feel). Cosmetic polish on TASK-1230.
2. Long-title overflow (BUG-1233). Item cards with unbreakable titles
(URLs, long identifiers, code-snippet titles) used to push the card
past its container — most visible on board view's narrow columns.
- `.item-card` → `min-width: 0` so it can shrink below its intrinsic
content width when it's a flex/grid child
- `.card-title` → `overflow-wrap: anywhere; min-width: 0` so any
character can be a break point when whitespace is absent
Deliberately NOT setting `overflow: hidden` on `.item-card` — the
PR badge protrudes at `right: -6px` and would be clipped.
Verification:
- golangci-lint -> 0 issues
- go test ./... -> all pass
- cd web && npm run build -> clean
- Manual: long-title item now wraps inside the card on board + list views;
PR badge still renders correctly at the new position.
* fix(web): reserve top-row right padding for PR badge per Codex review (round 1)
Codex flagged that moving the PR badge from top: -6px to top: 8px
brought it inside the card and on top of the .card-top-row content
(star button, optional collection badge, item ref). On dashboard
active-items panel and role board (both pass showCollection=true) or
items with long refs, the badge could cover that text and intercept
clicks.
Fix: add `class:has-pr={!!pullRequest}` to the card and reserve
padding-right: 52px on .card-top-row whenever a PR badge is present.
Width budget covers a 5-digit PR number worst case plus the badge's
right: -6px protrusion (~50px pill - 6px overhang = 44px inner gap;
rounded up to 52px for breathing room). Non-PR cards keep their full
top-row width.
Pad Web UI
SvelteKit 2 + Svelte 5 frontend for Pad, compiled to static files and embedded into the Go binary.
Development
npm install
npm run dev # Dev server at localhost:5173 (proxies API to localhost:7777)
npm run build # Production build to build/
npm run check # Type checking with svelte-check
When developing, run the Go backend separately with make dev from the project root.
Building for Production
Do not build in isolation. Always use make build from the project root — this builds the web frontend, then compiles the Go binary with the build output embedded via //go:embed.
Stack
- Svelte 5 with runes (
$state,$derived,$effect) - SvelteKit 2 with
adapter-static(SPA mode) - Tiptap block editor with markdown round-trip
- svelte-dnd-action for drag-and-drop in board/list views
- SSE for real-time updates
- TypeScript throughout
Structure
src/
routes/ SvelteKit pages
+layout.svelte App shell (sidebar + main)
+page.svelte Landing/redirect
[workspace]/
+page.svelte Dashboard (collections, phases, activity)
+layout.svelte SSE connection per workspace
[collection]/
+page.svelte Collection view (board/list)
[collection]/[item]/
+page.svelte Item detail + editor
conventions/ Purpose-built conventions page
playbooks/ Purpose-built playbooks page
settings/ Workspace settings
lib/
api/client.ts HTTP API client
components/
layout/ Sidebar, navigation
editor/ Tiptap editor, raw markdown editor
fields/ FieldEditor, relation picker
items/ ItemCard, ItemDetail
collections/ BoardView, ListView
common/ StatusBadge, badges, modals
search/ CommandPalette
activity/ ActivityFeed
stores/ Svelte 5 reactive stores
workspace.svelte.ts Workspace state
collections.svelte.ts Collection + item state
ui.svelte.ts Sidebar, mobile state
types/index.ts TypeScript types and constants
app.css Global styles and design tokens