chore: staging-QA polish bundle (docs overflow, reduced-motion, logo wall, showcase gradient, brand casing)#215
Merged
Merged
Conversation
Three independent regressions surfaced by a staging-wide QA sweep
(51 pages × 2 viewports). All addressed in one polish pass.
1) src/components/Prose.jsx
- prose-table:block prose-table:overflow-x-auto so wide reference
tables (notably /docs/references/configs, /docs/references/testing,
/docs/guides/deploying-to-kubernetes, /comparison, /migrate/from-*)
scroll inside their column instead of widening the entire page
past the mobile viewport.
- prose-pre:overflow-x-auto so long YAML / JSON / shell snippets
scroll inside the <pre> instead of stretching the prose column.
- prose-code:break-words so long unbreakable inline-code tokens
(env-var names, connection strings, fully-qualified Go identifiers)
wrap.
2) src/components/AnimatedTimelineItem.jsx
- Default isVisible=true; short-circuit the IntersectionObserver
fade for prefers-reduced-motion: reduce users (and SSR / no-JS).
- Previously, those users got every other timeline image at
opacity 0 — looked like /events was missing photos.
3) src/components/CompanyTrustedList.jsx
- 9 logos now render as a 3+3+3 grid at every breakpoint instead
of the previous w-1/4 / sm:w-1/6 / lg:w-1/5 ladder which produced
ragged 4+4+1 (mobile), 6+3 (sm), 5+4 (desktop) splits.
Validated by re-screenshotting the affected pages against a fully-
populated docker build (gofr/docs/Dockerfile overlay) and comparing
against the staging baseline. All flagged pages now render correctly
on mobile, with no desktop regression.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR addresses three UI regressions found during staging QA by improving mobile overflow handling in docs prose, fixing the events timeline visibility behavior for reduced-motion/SSR/no-JS cases, and making the homepage “trusted by” logo wall render as a consistent 3×3 grid.
Changes:
- Prevent page-level horizontal scrolling on narrow viewports by making
<pre>, inline<code>, and wide<table>content wrap/scroll within the prose column. - Adjust events timeline animation logic to default images visible and skip IntersectionObserver-driven fades for
prefers-reduced-motion: reduce(and SSR/no-JS). - Replace the logo wall flex-width ladder with a stable 3-column CSS grid so 9 logos always render as 3+3+3.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/Prose.jsx | Adds overflow/wrapping utilities to prevent mobile horizontal overflow from code blocks and tables. |
| src/components/AnimatedTimelineItem.jsx | Changes visibility defaults and reduced-motion handling for timeline image fade behavior. |
| src/components/CompanyTrustedList.jsx | Switches the logo list layout from flex-wrap widths to a consistent 3-column grid. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| useEffect(() => { | ||
| if (typeof window === 'undefined') return; | ||
| const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; |
Comment on lines
+11
to
20
| const [isVisible, setIsVisible] = useState(true); | ||
| const [isExiting, setIsExiting] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (typeof window === 'undefined') return; | ||
| const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; | ||
| if (reduce) return; // already visible=true, skip the observer-driven fade | ||
| // Start hidden post-hydration so the entry animation can play. | ||
| setIsVisible(false); | ||
| const observer = new IntersectionObserver( |
Dropping the `prose-table:block prose-table:overflow-x-auto` from
the previous commit. For reference pages like /docs/references/configs,
the page-level horizontal overflow at mobile widths is actually
more useful than a per-table horizontal scroll: every column
stays visible at once (small but scannable) instead of hiding
2 of 4 columns behind a thin, discovery-hostile scrollbar.
Page-width measurements before/after this revert (all mobile 375px target):
/docs/references/configs 787 → 787 (intentional, was the user's call)
/docs/references/testing 375 → 375 (prose-pre handles it)
/docs/quick-start/configuration 375 → 375 (prose-code:break-words handles it)
/docs/guides/deploying-to-k8s 527 → 527 (unchanged on staging too)
/comparison 453 → 453 (table-block didn't actually move
the needle here either; mild overflow
inherited from the matrix is the same
either way)
Keeping `prose-pre:overflow-x-auto` and `prose-code:break-words` —
those are unambiguous wins.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The header already shows a live, accurate star count via its own fetch. The showcase page rendered a second badge backed by a client-side localStorage cache that was never refreshed, so users hitting /showcase saw a stale number (e.g. 14.2K against the header's 21.5K). Removing the badge also lets the page lose 'use client', the useState/useEffect pair, and the formatNumber import — /showcase becomes a fully-static route (478 B vs 4.85 kB before). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ShowcaseGradient is a small decorative orb layer (cyan + indigo,
matching the Hero's existing vocabulary). Drop it inside any
`relative overflow-x-clip` wrapper and three pointer-events-none
orbs distribute down the page at alternating sides.
Wired into the framework's pitch surfaces:
- homepage (replaces the inline orb cluster)
- /why-gofr, /comparison/*, /migrate/* via MarketingPage's new
opt-in `withGradient` prop
- /showcase (its custom layout doesn't use MarketingPage, so
it composes ShowcaseGradient directly)
Reading-mode pages keep the calm canvas they had — /faq, /learn
also use MarketingPage but don't pass withGradient. /docs/** and
the rest of the site are untouched.
Also fixes the testimonials masonry on narrow viewports
(`Reviews.jsx`): added `block break-inside-avoid w-full` to each
card and `gap-x-6` between columns. Without break-inside-avoid,
CSS multi-column layout was splitting tall cards across the
column boundary, rendering the two halves on top of each other.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The lowercase 'r' is the canonical brand mark (matches the logo).
Two website-side spots had drifted to "GoFR" (all-caps R) or
"Gofr" (lowercase 'ofr'):
- src/lib/navigation.js — 7 desc strings used 'GoFR' through-out
the nav. This is the website's standalone copy of nav metadata;
the framework's gofr/docs/navigation.js overlays it during the
framework-docs docker build, so when paired with gofr#3398 the
fix lands in both layers.
- src/components/Search.jsx — `prettifySegment` was naive Title
Case, so search breadcrumbs rendered slugs like 'gofr-vs-gin'
as 'Gofr Vs Gin' and 'wrap-grpc' as 'Wrap Grpc'. Added a small
PRETTY_TOKENS map (gofr → GoFr, gofrcli → GoFr CLI, vs → vs,
grpc → gRPC, etc.) so the breadcrumb honors the brand mark and
common acronyms while plain words still fall through to Title
Case.
Code identifiers left alone (RegisterServerWithGofr, GOFR_TELEMETRY).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
aryanmehrotra
changed the title
This was referenced May 6, 2026
Umang01-hash
approved these changes
May 6, 2026
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
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.
Consolidates four staging-QA-driven polish PRs into one. Each section below was originally its own PR; this combines them so reviewers and CI run once.
1. Docs mobile overflow + events reduced-motion + logo wall grid (was #215)
Surfaced by a staging-wide QA sweep (51 pages × 2 viewports). Three independent regressions:
src/components/Prose.jsx—prose-pre:overflow-x-autoso long YAML/JSON/shell snippets scroll inside the<pre>;prose-code:break-wordsso long unbreakable inline-code tokens wrap.src/components/AnimatedTimelineItem.jsx— defaultisVisible: true; short-circuit the IntersectionObserver fade forprefers-reduced-motion: reduceusers (and SSR / no-JS). Previously those users got every other timeline image at opacity 0 — looked like/eventswas missing photos.src/components/CompanyTrustedList.jsx— 9 logos now render as a clean 3+3+3 grid at every breakpoint instead of the previousw-1/4 sm:w-1/6 lg:w-1/5ladder (4+4+1 / 6+3 / 5+4 ragged).2. Showcase: drop redundant stars badge (was #213)
The header already shows a live, accurate GitHub star count. The
/showcasepage rendered a second badge backed by a client-side localStorage cache that was never refreshed — so visitors saw a stale number (e.g. 14.2K on/showcasevs 21.5K in the header). Removed the badge. As a direct consequence the page no longer needs'use client', theuseState/useEffectpair, or theformatNumberimport.3. Showcase: shared gradient layer + testimonials masonry fix (was #214)
ShowcaseGradientcomponent — three pointer-events-none cyan+indigo orbs distributed down the page, matching the vocabulary the Hero already uses. Drop inside anyrelative overflow-x-clipwrapper./— replaces the page's inline orb cluster/why-gofr,/comparison/*,/migrate/*— via a new opt-inwithGradientprop onMarketingPage/showcase— composed directly into its custom layout/faq,/learnalso useMarketingPagebut don't passwithGradient./docs/**is untouched.Reviews.jsx: testimonials masonry was splitting tall cards across CSS-column boundaries on narrow viewports, rendering the two halves on top of each other. Addedblock break-inside-avoid w-fullto each card andgap-x-6between columns.4. GoFr brand casing in nav descriptions and search breadcrumbs (was #216)
The lowercase 'r' is the canonical brand mark (matches the logo). Two website-side spots had drifted to
GoFR/Gofr/ naively title-cased renderings.src/lib/navigation.js— sevendesc:strings usedGoFRthrough-out the navigation metadata. The framework'sgofr/docs/navigation.jsoverlays it during the framework-docs docker build, so when paired with gofr#3398 the fix lands in both layers.src/components/Search.jsx—prettifySegmentwas naive Title Case, so search breadcrumbs rendered slugs likegofr-vs-ginas "Gofr Vs Gin" andwrap-grpcas "Wrap Grpc". Added a smallPRETTY_TOKENSmap covering the brand mark and common acronyms (gofr→GoFr,grpc→gRPC,graphql→GraphQL,vs→ lowercase comparator, etc.); plain words fall through to Title Case.Real Go identifiers and env-var conventions are deliberately left untouched (
RegisterServerWithGofr,GOFR_TELEMETRY).Test plan
npx next build— green; all 80+ routes compile,/showcaselisted as ○ (static), 806 B./,/why-gofr,/comparison,/migrate,/showcase; absent on/faq,/learn. Testimonials no longer overlap on tablet width./showcasehero shows just the heading./eventsphotos visible under reduced-motion. Logo wall is 3+3+3 at every breakpoint. Search breadcrumbs show "GoFr vs Gin" / "GoFr CLI". NoGoFRleft anywhere in nav.Supersedes
Closes #213, #214, #216 — all of their commits are stacked on this branch.