Simplify SSW.Rules footer deployment line + iPad portrait fix (+ review follow-ups) by 0xharkirat · Pull Request #2646 · SSWConsulting/SSW.Rules

0xharkirat · 2026-05-25T01:40:26Z

Description

✏️

Shortened and modernized the footer deployment line so it fits iPad portrait and narrow widths, including the md → lg layout breakpoint change.
Implemented live-updating relative deploy time (<RelativeTime>) with a custom UTC tooltip and keyboard-accessible behavior.
Kept consistent hover affordance across the 3 footer items (white text to red on hover/focus, no underline) and simplified build info to commit hash link.
Removed Moment usage from this footer surface by using native Date formatting.
Added review follow-up fixes: deployment rule link now uses pathPrefix (host-aware for preview/non-prod environments), and relative-time includes a native title fallback for broader accessibility support.

Screenshot (optional)

✏️

Existing PR preview and responsive screenshots remain valid: https://app-sswrules-staging-pr-2646.azurewebsites.net/rules

Per Adam's request, tighten the SSW.Rules footer so it fits on iPad portrait. "This website is under CONSTANT CONTINUOUS DEPLOYMENT. Last deployed 13 minutes ago on May 23, 2026 ..." becomes "ssw.com.au <3 CONTINUOUS DEPLOYMENT. Last deployed 13 min ago 23 May 2026 ...". - "This website is under" -> "ssw.com.au" + heart icon - drop "CONSTANT" - abbreviate "minutes"/"minute" -> "min" - date format "MMM D, YYYY" -> "D MMM YYYY", drop leading "on" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

vercel · 2026-05-25T01:40:30Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ssw-rules	Error		May 26, 2026 5:04pm

0xharkirat · 2026-05-25T01:52:09Z

Responsive check — iPad + narrow widths

Real before vs after of the footer (Playwright):

BEFORE = production → https://www.ssw.com.au/rules
AFTER = Azure preview (/deploy) → https://app-sswrules-staging-pr-2646.azurewebsites.net/rules

Latest design (head acc1586):

This website is under continuous deployment. Last updated 18 min ago. Last commit acc1586

3 hoverables on the line, all sharing one affordance — white text → red on hover, no underline:

continuous deployment — link to https://www.ssw.com.au/rules/rules-to-better-websites-deployment
18 min ago — custom CSS tooltip showing "Last deployed D MMM YYYY at HH:mm UTC" (replaces the easy-to-miss native title; also cursor: help). Live-updates every 60s via a tiny <RelativeTime> Client Component so the time doesn't freeze in cached HTML. Keyboard-focusable + aria-describedby for SR.
acc1586 — link straight to the GitHub commit.

Tooltip on hover (iPad portrait)

Width comparison

Width	BEFORE (prod, deploy line)	AFTER (this PR)
768px (iPad portrait)	2 lines	1 line
540px	2 lines	1 line
414px	4 lines	2 lines
375px	4 lines	2 lines

768px — iPad portrait

BEFORE

AFTER

540px

BEFORE

AFTER

414px

BEFORE

AFTER

375px

BEFORE

AFTER

_{Deploys run on Azure App Service via GitHub Actions; /deploy (manual) triggers a slot build per push. Screenshots hosted on branch pr-2646-footer-shots (assets only, deletable after merge).}

0xharkirat · 2026-05-25T02:21:38Z

/deploy

github-actions · 2026-05-25T02:42:39Z

PR Preview Deployed


Preview URL	https://app-sswrules-staging-pr-2646.azurewebsites.net/rules
Slot Name	`pr-2646`
Branch	`hs/footer-shorten-deployment-info`
Commit	`6bf166468ebcbdf44e6fee5677cfd339b6402988`

_{This preview will be automatically deleted when the PR is closed.}

tiagov8 · 2026-05-25T21:51:49Z

Hi @0xharkirat / @adamcogan

+1 to @danielmackay 's suggestion: Simplify the build information into a version number

My 2 cents:

⚠️ Whatever is changed here should also be applied to: https://www.ssw.com.au/people/ and https://www.ssw.com.au/
The extra ❤️ is too close to the other one, making it feel a bit try-hard
No reason for the ALL UPPERCASE
When users see a URL (ssw.com.au), they expect it to be clickable. We don’t link to the page itself. Text should either say “This website is...” (recommended) OR “SSW is..."
The exact time and date are not so important. It can be a tooltip of the “X min ago"
Build number doesn’t mean much to users. Should be a version number as per Dan

--

To go user-friendly, I would change from:

ssw.com.au ❤️ CONTINUOUS DEPLOYMENT. Last deployed 13 min ago 23 May 2026 at 08:04 UTC (Build # 568-0716406)

To:

This website is under continuous deployment. Last updated 13 min ago. Last commit XXX

--
Notes:

Hovering "X min ago” shows tooltip with exact date and time
Hovering Version number shows tooltip with the built details and link

tiagov8 · 2026-05-25T22:03:17Z

@0xharkirat

The iPad Portrait view is still bad.

We should make the rows become columns on large screens instead of medium.

Not sure if you wanna try AI for that, but the class changes would be from:

<div class="mx-6 flex flex-col-reverse md:flex-row justify-between align-middle leading-6">
...
<div class="w-full md:w-3/4 md:text-right py-2 flex max-sm:flex-col items-center max-sm:justify-start justify-center md:justify-end">
...
<div class="flex flex-col md:flex-row justify-between mx-6">

to

<div class="mx-6 flex flex-col-reverse lg:flex-row justify-between align-middle leading-6">
...
<div class="w-full lg:w-3/4 lg:text-right py-2 flex max-sm:flex-col items-center max-sm:justify-start justify-center lg:justify-end">
...
<div class="flex flex-col lg:flex-row justify-between mx-6">

--

Footer text now: This website is under continuous deployment. Last updated X ago. Last commit YYY - Drop ssw.com.au prefix + heart (too close to existing "We <heart> open source" heart - Tiago) - Lowercase "continuous deployment" (Tiago: no reason for ALL CAPS) - "This website is under" instead of "ssw.com.au" so it doesn't look like a self-link (Tiago) - Absolute build date moved into a tooltip on "X ago" (Tiago) - Replace Build # with linkable commit hash from COMMIT_HASH env, linked to the GitHub commit - Breakpoint md -> lg on social/deployment/powered-by rows so iPad portrait stays stacked with full width (Tiago: iPad portrait still bad at md). Also lg:text-right on powered-by for consistency - Drop now-unused versionDeployed/deploymentUrl consts Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-26T01:50:30Z

Thanks @tiagov8 — applied your feedback:

✅ Dropped the extra ❤️ (was too close to the "We ❤️ open source" heart)
✅ Lowercase "continuous deployment" (no more ALL CAPS)
✅ "This website is under…" instead of "ssw.com.au" (no self-link feel)
✅ Absolute date moved into a title tooltip on "X ago"
✅ Breakpoint md → lg on the social, deployment and powered-by rows — this is the actual iPad-portrait fix. Also switched md:text-right → lg:text-right on the "Powered by" cell so it doesn't right-align while stacked at md.
📌 The same change will be applied to ssw.com.au homepage (SSW.Website) and /people (SSW.People) in follow-up PRs once this one lands.

New text: This website is under continuous deployment. Last updated 13 min ago. Last commit YYY

Retriggering /deploy to get a fresh preview reflecting the new design — I'll update the screenshot comment when it's ready.

0xharkirat · 2026-05-26T01:50:32Z

/deploy

0xharkirat · 2026-05-26T01:53:41Z

/deploy

@0xharkirat

…tooltips Per @0xharkirat feedback - too many hoverable things on the same line. - Drop the link wrapper on "continuous deployment" -> plain text. The original rule link (rules-to-better-websites-deployment) was invisible anyway (footer strips underline) and not worth the discoverability question. - "X min ago" tooltip text: now reads "Last deployed D MMM YYYY at HH:mm UTC" instead of just the date - more self-explanatory on hover. - Drop the title tooltip on the commit hash link - clicking goes straight to the commit; no extra tooltip needed. Net: 2 hoverable bits per line (1 tooltip + 1 link) instead of 3. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-26T02:57:51Z

/deploy

- Extract "X min ago" into <RelativeTime> Client Component that ticks every 60s. Fixes the "stuck at 7 min ago" issue: the old span was rendered server-side and frozen in cached HTML. - Replace native title="..." (invisible until ~1s hover, easy to miss, unscreenshottable) with a custom CSS tooltip via group-hover. White bubble on the dark footer, instant fade-in. Also adds cursor: help as a subtle affordance hint. - Fix UTC bug: tooltip label said "UTC" but moment().format() rendered local time. Now uses moment(buildDate).utc().format(...). On Azure (UTC server) the bug was invisible; locally / on non-UTC servers it was off by the timezone offset. - Plurals: "day(s)" / "hour(s)" -> "day"/"days", "hour"/"hours". - Remove the now-unused getLastDeployTime() helper and moment import from footer.tsx (moved into RelativeTime). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-26T06:01:24Z

/deploy

Previously plain text per the simplification pass; restoring as a real link to https://www.ssw.com.au/rules/rules-to-better-websites-deployment since that's a useful destination (the rule explaining the practice). Inline style textDecoration: underline overrides the footer's [&_a]:no-underline so it actually looks like a link. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-26T06:13:33Z

/deploy

Three hoverable items on the deployment line ("continuous deployment" link, "X min ago" tooltip trigger, commit hash link) now use the same hover pattern: text-white by default, hover:text-ssw-red, no underline. - Drop the inline textDecoration: underline on the continuous- deployment link (added in the last commit) - was the odd one out. - RelativeTime span gets text-white hover:text-ssw-red transition classes so the tooltip trigger gets the same color-change affordance on hover instead of being indistinguishable from prose. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-26T06:26:56Z

/deploy

0xharkirat · 2026-05-26T06:56:46Z

Hey @tiagov8 ,
All done, check preview and screenshots

tiagov8 · 2026-05-27T01:42:00Z

cc @PothieuG

SSW Rules is hosted on Azure not on Vercel, that's why the Vercel build is failing, it might be a stale Vercel deploy workflow.

We need to YakShave that, to remove the stale Vercel build workflow..

@Aibono1225 Can you action this?

Aibono1225 · 2026-05-27T07:22:23Z

cc @PothieuG

SSW Rules is hosted on Azure not on Vercel, that's why the Vercel build is failing, it might be a stale Vercel deploy workflow.

We need to YakShave that, to remove the stale Vercel build workflow..

@Aibono1225 Can you action this?

👍Yes - PBI created: #2648

tiagov8 · 2026-05-27T17:40:14Z

Note: This new rule was created based on this PR: https://www.ssw.com.au/rules/show-deployed-commit

0xharkirat · 2026-05-29T04:43:05Z

/deploy

Addresses the bot's 6 inline comments plus two small follow-ups: - parseInt(BUILD_TIMESTAMP, 10): explicit radix, matches codebase style. - Drop moment from RelativeTime; format the UTC tooltip with native Date (Number.padStart for HH:mm). Saves shipping moment to the browser for one tooltip. - Accessibility: * Wrapper span is tabIndex=0 when a tooltip exists so keyboard users can reveal it via focus. * Tooltip span is linked via aria-describedby (useId for an SSR- stable id) so screen readers announce it after the visible time. * Drop aria-hidden on the tooltip (was blocking AT access). * focus-visible:text-ssw-red + group-focus-visible:opacity-100 so the same color change + tooltip reveal happens on keyboard focus. - formatUtcDate: guard against an invalid BUILD_DATE; bail to no tooltip instead of rendering "Last deployed NaN undefined NaN ...". - continuous-deployment link rel="nofollow" added for consistency with every other external link in the footer. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-29T04:44:37Z

/deploy

0xharkirat · 2026-05-29T05:06:42Z

@copilot please review the latest commit (acc1586)

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

Copilot · 2026-05-29T05:14:15Z

@copilot please review the latest commit (acc1586)

Reviewed and applied 2 follow-up fixes in f2147e0: switched the deployment-rule link to use pathPrefix (so previews/non-prod hosts don’t jump to prod), and added a native title fallback on the relative-time tooltip wrapper for broader accessibility support. Validation passed (targeted lint/tests + Code Review + CodeQL).

…r, native title - footer.tsx: switch the continuous-deployment link from a hardcoded https://www.ssw.com.au/... URL back to ${pathPrefix}/... so PR previews and non-prod hosts stay within their own site instead of jumping to prod (Copilot footer.tsx:129). Also drop the now-pointless target="_blank" and rel="..." since the link is internal again. - relative-time.tsx: tooltip prefix "Last deployed" -> "Last updated" to match the visible "Last updated X ago" copy (Copilot relative-time.tsx:70). - relative-time.tsx: apply cursor-help only when a tooltip is available, so the UI doesn't suggest extra info when there is none, e.g. when BUILD_DATE is missing/invalid (Copilot relative-time.tsx:75). - relative-time.tsx: add title={tooltip} on the wrapper as a native a11y fallback for older screen readers / non-AT contexts, alongside the existing aria-describedby pointing at the custom CSS bubble (Copilot relative-time.tsx:54). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat · 2026-05-29T05:31:38Z

/deploy

0xharkirat · 2026-05-29T05:39:40Z

all copilot comments resolved.
Ready to merge

0xharkirat · 2026-05-29T05:41:18Z

/deploy

0xharkirat · 2026-06-01T05:19:48Z

✅ Done

Figure: Updated footer text with commit hash

…me) (#4720) ## Summary Mirrors the footer deployment-line refresh shipped in [SSWConsulting/SSW.Rules#2646](SSWConsulting/SSW.Rules#2646) so `ssw.com.au` (homepage + most pages) stays consistent with `ssw.com.au/rules`. Tiago's review on the Rules PR called out: > Whatever is changed here should also be applied to: ssw.com.au/people/ and ssw.com.au/ This is the ssw.com.au half of that. SSW.People follow-up PR is next. **Before:** > This website is under CONSTANT CONTINUOUS DEPLOYMENT. Last deployed 13 minutes ago (Build # 1234) **After:** > This website is under continuous deployment. Last updated 13 min ago. Last commit 1443e30 ## Changes - **Text**: drop "CONSTANT", lowercase "continuous deployment", "Last updated" instead of "Last deployed", drop the Build # run-number link, replace with a commit-hash link to the GitHub commit. - **`<RelativeTime>` Client Component** (new `components/layout/footer/relative-time.tsx`): - Ticks every 60s so the relative time doesn't freeze in cached HTML (was a real issue on the Rules side). - Custom CSS tooltip (`group-hover` + `group-focus-visible`) showing the exact UTC datetime — replaces the easy-to-miss native `title`-only tooltip. - Accessibility: `tabIndex=0` when a tooltip exists, `aria-describedby` linking to the tooltip span, plus a native `title` fallback for older AT / non-AT browsers, conditional `cursor: help`. - Native `Date` formatting — no `moment` shipped to the browser for one tooltip. - **Workflow**: `template-build.yml` plumbs `NEXT_PUBLIC_GITHUB_SHA=${{ github.sha }}` into the Docker build args alongside the existing `NEXT_PUBLIC_GITHUB_*` family. The footer then derives the 7-char short hash for display + the commit URL via `NEXT_PUBLIC_GITHUB_REPOSITORY`. - **Cleanup**: delete `components/layout/deploymentLink.tsx` — no longer imported now that the deployment line is inline in `deployment-info.tsx`. ## Test plan - [x] Verified locally with `pnpm dev` + mock build env (`NEXT_PUBLIC_GITHUB_RUN_DATE`, `NEXT_PUBLIC_GITHUB_SHA`, `NEXT_PUBLIC_GITHUB_REPOSITORY`) - [x] Hover "X ago" → custom tooltip "Last updated D MMM YYYY at HH:mm UTC" - [x] Keyboard focus on "X ago" → tooltip reveals (focus-visible) - [x] `continuous deployment` link → SSW Rule - [x] Commit hash → `https://github.com/SSWConsulting/SSW.Website/commit/<sha>` - [x] If `NEXT_PUBLIC_GITHUB_SHA` missing (dev), commit segment hides cleanly; if `NEXT_PUBLIC_GITHUB_RUN_DATE` missing, RelativeTime falls back to "XXX" (matches existing behaviour) ## Follow-up - SSW.People (Gatsby) — separate PR to ship the same line on `ssw.com.au/people`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

0xharkirat requested a review from tiagov8 May 25, 2026 01:40

vercel Bot temporarily deployed to Preview May 25, 2026 01:41 Inactive

0xharkirat added a commit that referenced this pull request May 25, 2026

Add live Azure preview footer screenshots (PR #2646)

2426814

vercel Bot temporarily deployed to Preview May 26, 2026 01:51 Inactive

vercel Bot temporarily deployed to Preview May 26, 2026 02:59 Inactive

vercel Bot temporarily deployed to Preview May 26, 2026 06:02 Inactive

vercel Bot temporarily deployed to Preview May 26, 2026 06:15 Inactive

vercel Bot temporarily deployed to Preview May 26, 2026 06:28 Inactive

0xharkirat requested a review from Copilot May 26, 2026 06:57

Copilot started reviewing on behalf of 0xharkirat May 26, 2026 06:57 View session

Aibono1225 mentioned this pull request May 27, 2026

🧹 Remove stale Vercel build workflow for SSW Rules #2648

Closed

github-actions Bot mentioned this pull request May 27, 2026

fix: remove stale Vercel env var references - closes #2648 #2649

Closed

0xharkirat changed the title ~~Shorten footer deployment text for portrait iPad~~ Simplify SSW.Rules footer deployment line + iPad portrait fix May 29, 2026

Copilot started work on behalf of 0xharkirat May 29, 2026 05:06 View session

0xharkirat requested a review from Copilot May 29, 2026 05:08

Copilot started reviewing on behalf of 0xharkirat May 29, 2026 05:08 View session

Copilot AI reviewed May 29, 2026

View reviewed changes

Comment thread components/layout/nav/relative-time.tsx

Comment thread components/layout/nav/relative-time.tsx

Copilot AI changed the title ~~Simplify SSW.Rules footer deployment line + iPad portrait fix~~ Simplify SSW.Rules footer deployment line + iPad portrait fix (+ review follow-ups) May 29, 2026

Copilot finished work on behalf of 0xharkirat May 29, 2026 05:15

tiagov8 approved these changes May 30, 2026

View reviewed changes

tiagov8 merged commit 2783661 into main May 30, 2026

tiagov8 deleted the hs/footer-shorten-deployment-info branch May 30, 2026 17:53

tiagov8 temporarily deployed to staging May 30, 2026 17:53 — with GitHub Actions Inactive

This was referenced Jun 1, 2026

Footer: match new SSW.Rules deployment line (text + tooltip + live time) SSWConsulting/SSW.Website#4720

Merged

Footer: full commit SHA in URL, short hash for display #2651

Open

0xharkirat mentioned this pull request Jun 2, 2026

Footer: match new SSW.Rules + SSW.Website deployment line (text + tooltip + commit hash) SSWConsulting/SSW.People#846

Open

6 tasks

Conversation

0xharkirat commented May 25, 2026 • edited by Copilot AI Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshot (optional)

Uh oh!

vercel Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xharkirat commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Responsive check — iPad + narrow widths

Tooltip on hover (iPad portrait)

Width comparison

768px — iPad portrait

540px

414px

375px

Uh oh!

0xharkirat commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Preview Deployed

Uh oh!

tiagov8 commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tiagov8 commented May 25, 2026

Uh oh!

0xharkirat commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

0xharkirat commented May 26, 2026

Uh oh!

tiagov8 commented May 27, 2026

Uh oh!

Aibono1225 commented May 27, 2026

Uh oh!

tiagov8 commented May 27, 2026

Uh oh!

0xharkirat commented May 29, 2026

Uh oh!

0xharkirat commented May 29, 2026

Uh oh!

0xharkirat commented May 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented May 29, 2026

Uh oh!

0xharkirat commented May 29, 2026

Uh oh!

0xharkirat commented May 29, 2026

Uh oh!

0xharkirat commented May 29, 2026

Uh oh!

0xharkirat commented Jun 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

0xharkirat commented May 25, 2026 •

edited by Copilot AI

Loading

vercel Bot commented May 25, 2026 •

edited

Loading

0xharkirat commented May 25, 2026 •

edited

Loading

github-actions Bot commented May 25, 2026 •

edited

Loading

tiagov8 commented May 25, 2026 •

edited

Loading

0xharkirat commented May 26, 2026 •

edited

Loading