Birthdate field on profile (#167) + compact-print project link fix (#168)#169
Merged
Conversation
…int (#168) - Add `birthdate` column to `profile` via automatic migration; new `<input type="date">` in the admin profile modal. Renders as a localized contact badge in the admin view and as a "Born: …" line on the ATS PDF and static-site exports, formatted via Intl.DateTimeFormat in the active locale. When empty, nothing renders anywhere. - Treat birthdate as sensitive PII: stripped from the public /api/profile endpoint and from the public dataset endpoints (serveDatasetData / serveDatasetDataById) so it never reaches the public read-only site even when a dataset is marked public. - Add `form.birthdate`, `form.birthdate_hint`, `contact.born` translation keys to all 8 locale files. - Bug fix: drop `.project-link` from the print-compact hide rule in styles.css so the link icon appears next to the project title in compact print mode (matching ATS export behavior). - Regression tests in tests/backend.test.js: round-trip, validation, empty-clears-value, public endpoint never exposes birthdate, PDF byte-length differs when birthdate is present vs absent and across locales.
- Wrap the birthdate field in a form-row so it occupies one grid cell (1fr of 2) instead of stretching across the full modal, matching the email/phone visual width. - Add explicit white background and a softened calendar-picker indicator on input[type="date"].form-input so the native browser styling no longer paints a grey fill that differed from the surrounding text inputs.
Fold the half-width / white-background tweak into the 1.50.0 changelog entry instead of cutting a separate 1.50.1 patch — the UI polish is part of the same feature ship.
The native <input type="date"> renders through Chromium's
::-webkit-datetime-edit* shadow DOM with its own line metrics,
intrinsic min-width, and placeholder color — even with a heavy
CSS override the field looked taller, wider, and lighter than the
surrounding text inputs, and the fix was browser-specific.
Switch to type="text" with pattern="\d{4}-\d{2}-\d{2}",
maxlength=10, inputmode="numeric", autocomplete="bday", and a
"YYYY-MM-DD" placeholder. The field now inherits the exact same
.form-input styling as email/phone/etc. Server-side validation
already enforces the same regex so the round-trip is unchanged.
Reverts the type="text" workaround. Keep <input type="date"> so the native calendar picker is still available, but normalize the Chromium ::-webkit-datetime-edit* shadow-DOM tree so the field visually matches the other .form-input text fields: - appearance: none + min-width: 0 so the date input uses the box model from .form-input instead of its intrinsic dimensions. - Pseudo-element color inherits from .form-input (no more light grey "yyyy-mm-dd" placeholder) and line-height/padding are zeroed so the box collapses to the same height as text inputs. - .form-input now declares explicit color, background and line-height (which the date input pseudo-elements inherit). - Calendar picker indicator dimmed to 0.55 opacity so the icon feels in-place rather than the visual centerpiece.
Without this override .project-link's default display:flex, 28×28 box, and grey button background made the link wrap to its own line and dominate the row in compact print mode. The print-compact rule now strips the box (display:inline, no background, no margin) and shrinks the icon to 9px so the link sits right after the project title as a small inline glyph.
- Force the icon to 10px with !important so it overrides the inline style="font-size:14px" emitted by materialIcon(), which was leaving the icon larger than the surrounding 11px text. - Switch the anchor to inline-block + vertical-align: middle so the glyph centers on the text's vertical midline instead of sitting on the baseline. - Margin 0 4px so the icon has equal breathing room on both sides of the em-dash that separates title from description.
PDF generators use the anchor box as the hyperlink hit region. With width/height auto and no padding the box collapsed to the 10×10 glyph — a tiny click target in saved PDFs. Add invisible 2px/4px padding around the icon so the clickable region is wide enough to hit reliably while the visible glyph stays the same size. Reduce horizontal margin to 2px to compensate.
…urvives Safari's "Save as PDF" + iOS Preview drop the hyperlink annotation on anchors that lay out as display:inline or display:inline-block with width:auto — the PDF generator attaches the annotation to the anchor's box, and an effectively empty rectangle means the link is unclickable in the resulting PDF. Switch to display:inline-flex with explicit 14×14 dimensions and align-items/justify-content centering. The icon stays the same visible size but the anchor now has a concrete rectangle that iOS Preview (and other PDF viewers) honour as a clickable region.
The icon-only approach kept dropping out as a non-clickable
glyph in some PDF viewers (notably iOS Preview) because the
hyperlink annotation attached to an effectively empty/oddly
positioned anchor box.
Hide the Material icon in compact print and emit the URL as
text via .project-link::after { content: attr(href) }. The
visible text is the anchor's content, so the PDF generator
attaches the link annotation to actual rendered glyphs — the
most reliably clickable form across PDF viewers. Style is
small/grey/inline so it doesn't dominate the title row.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #167. Closes #168.
Summary
Two issues bundled into one release (v1.50.0):
#167 — Add birthday to
contactBadges(improvement)birthdatecolumn on theprofiletable, added via automatic migration. Stored as ISOYYYY-MM-DD.<input type="date">between Phone and the LinkedIn URL — labelled and hinted via the newform.birthdate/form.birthdate_hinti18n keys.cakeMaterial icon) and as aBorn: …line in the ATS PDF and static-site exports, formatted viaIntl.DateTimeFormatin the active locale. So:Born: March 14, 1990Geb.: 14. März 1990Né(e) le : 14 mars 1990"Born: "line. This is the invariant the issue requested.publicApp.get('/api/profile'),serveDatasetData, andserveDatasetDataById, plus removed from the static-site export. The new helperstripPublicSensitiveProfile(data)is the single chokepoint.form.birthdate,form.birthdate_hint, andcontact.bornkeys added to all 8 locale files (en, de, fr, nl, es, it, pt, zh) — key parity test still passes.#168 — Project link missing in compact print (bug)
Confirmed bug in
public/shared/styles.css:2031-2034: when the Projects section had the "print compact" toggle on,.project-linkwas in thedisplay:none !importantlist, so the link icon vanished in print — even though the same link was always rendered by the ATS PDF export and by the non-compact print view. Removed.project-linkfrom the selector list;.drag-handle,.item-actions, and.tech-tagsstill hide as before (admin chrome / explicit compactness trade-off).Test plan
npm test).tests/backend.test.js→Birthdate on profile:/api/profile(port 3001) does NOT includebirthdateeven after the admin sets one.serverT).npm run dev, edit profile, leave birthdate empty → no badge anywhere (admin view, print preview, ATS PDF, static-site export). Set a birthdate → appears localized on admin + ATS exports, still absent from public site at :3001.Version
MINOR bump 1.49.5 → 1.50.0 (new feature). All four files updated (
package.json,package-lock.jsontop-level +packages[""],version.json,CHANGELOG.md).Generated by Claude Code