Wrap generated demo file paths in onboarding page (Part 1 of #4062)

[justin808]

What

Adds CSS wrapping to the code rule in the generated onboarding demo page so long file paths wrap instead of overflowing their container.

   code {
     padding: 2px 6px;
     border-radius: 8px;
     background: rgba(17, 32, 49, 0.06);
     color: var(--ink);
     font-size: 0.95em;
+    overflow-wrap: anywhere;
+    word-break: break-word;
   }

File: lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt

Why

The generated hello_world onboarding page renders file paths inside <code> elements in the "Inspect these files next" card (<code><%= hint[:path] %></code>). The code CSS rule had no wrapping properties, so long file paths overflowed horizontally on narrow viewports (mobile / small windows), pushing the card out and creating horizontal scroll.

Scope: Part 1 of #4062

This PR is Part 1 only — the CSS wrapping fix.

Part 2 is intentionally deferred as a separate, larger change: deriving the displayed source hints from the Shakapacker configuration (rather than hardcoding paths in the template). That work is broader and warrants its own PR. Using Refs #4062 (not Fixes) so the issue stays open for Part 2.

Codex Decision Log

• Chose overflow-wrap: anywhere + word-break: break-word together. overflow-wrap: anywhere allows breaking long unbreakable tokens (like slash-separated paths with no spaces) and, unlike break-word, is also considered when computing the min-content intrinsic size — preventing the container itself from overflowing. word-break: break-word is added as a defensive fallback for older engines. Both are minimal additions scoped strictly to the existing code rule; no other selectors were touched.

Validation

• Ran bundle exec rspec spec/react_on_rails/generators/install_generator_spec.rb. The targeted landing-page example passes in isolation (1 example, 0 failures). The full-file run shows pre-existing failures caused by cross-example generated-directory state pollution ("Expected file ... to exist, but does not"), unrelated to this change — none reference the code rule, overflow-wrap, or word-break.
• No .rb files changed, so RuboCop was not required.
• ERB/HTML tags in the template are untouched; the change is confined to the CSS code block.

Refs #4062

🤖 Generated with Claude Code

---

Note

Low Risk
Presentation-only change in a generator ERB template; no runtime Ruby or app logic affected.

Overview
Adds overflow-wrap: anywhere and word-break: break-word to the inline code styles in the generated hello world onboarding view template so long slash-separated file paths in the “Inspect these files next” hints wrap on narrow viewports instead of overflowing the card.

Scoped to the generator template only; new apps get the fix automatically. Part 1 of #4062 (Shakapacker-derived paths deferred).

^{Reviewed by Cursor Bugbot for commit 9f5e926. Bugbot is set up for automated code reviews on this repo. Configure here.}

[claude]

Code Review: Wrap generated demo file paths (Part 1 of #4062)

Summary: This is a minimal, focused CSS fix — 2 lines added to the code rule in the generator template to prevent long file paths from causing horizontal overflow on narrow viewports. The change is low-risk and well-scoped.

---

What's Good

• Correct property choice. overflow-wrap: anywhere is the right primary fix: it breaks unbreakable tokens (like slash-separated paths) at arbitrary points and also factors into the element's min-content intrinsic size, so the container itself won't overflow — not just the text inside it. This is more thorough than overflow-wrap: break-word.
• Minimal scope. The code selector is inline inside the template's <style> block, so it's isolated to the generated demo page and won't pollute any app styles.
• PR description quality. The decision log explaining why both properties were chosen is excellent and will be useful when someone reads the template in the future.

---

Minor Points

1. word-break: break-word is partially redundant. Per the CSS Text Level 3 spec, word-break: break-word is a non-standard legacy value that browsers normalise to word-break: normal + overflow-wrap: anywhere — effectively what you already have. It does no harm and adds a small cross-browser safety net for very old engines, so keeping it is fine, but it shouldn't be relied on as a meaningful independent fallback.

2. Order convention. Most CSS style guides list word-break before overflow-wrap when using both together, since word-break is the older/broader property. This is purely cosmetic and the current order is not wrong.

3. Existing generated apps are unaffected. This is expected for a generator template — only newly scaffolded apps will get the fix. Worth noting in the issue (Follow-up: wrap generated demo file paths and derive source hints from Shakapacker config #4062) if not already captured, so users with existing apps know they need to apply the CSS manually.

---

Test Coverage

The spec pass noted in the description is sufficient for this change — the fix is visual and can only be fully validated by rendering the page at a narrow viewport. No unit test could meaningfully cover it.

---

Verdict

Approved. The change is correct, minimal, and well-documented. The redundancy of word-break: break-word is negligible and the combination is a widely-accepted cross-browser pattern.

[greptile-apps]

Greptile Summary

Adds two CSS properties — overflow-wrap: anywhere and word-break: break-word — to the global code rule inside the generated hello_world onboarding page template, preventing long file paths from overflowing their container on narrow viewports.

• Single <style> block change: two lines added to the existing code selector in index.html.erb.tt; no markup, Ruby, or generator logic is touched.
• overflow-wrap: anywhere handles unbreakable tokens (e.g. slash-separated paths) and also suppresses min-content overflow; word-break: break-word is a widely-supported legacy alias kept as a defensive fallback for older rendering engines.

Confidence Score: 5/5

Two CSS properties added to one selector in a generator template; no logic, markup, or Ruby code is altered.

The change is confined to two CSS lines in a style block that is only rendered on the generated onboarding demo page. Both properties are well-supported, their interaction is intentional and documented in the PR description, and no other selectors, generator logic, or application code is touched.

No files require special attention.

Important Files Changed

Filename	Overview
react_on_rails/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt	Adds overflow-wrap: anywhere and word-break: break-word to the code CSS rule so long file paths in the "Inspect these files next" card wrap instead of overflowing on narrow viewports; no logic or markup changes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Generator runs<br/>(install_generator)"] --> B["Writes index.html.erb.tt<br/>as index.html.erb"]
    B --> C["Rails renders<br/>hello_world#index"]
    C --> D["config[:file_hints] iterated"]
    D --> E["&lt;code&gt;<%= hint[:path] %>&lt;/code&gt;"]
    E --> F{"Path length?"}
    F -- "Short path" --> G["Fits inline — no wrap needed"]
    F -- "Long path<br/>(e.g. deep nested file)" --> H["overflow-wrap: anywhere<br/>breaks at any character boundary"]
    H --> I["Path wraps within card ✓"]
    G --> I
    I --> J["Card stays within viewport<br/>No horizontal scroll"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A["Generator runs<br/>(install_generator)"] --> B["Writes index.html.erb.tt<br/>as index.html.erb"]
    B --> C["Rails renders<br/>hello_world#index"]
    C --> D["config[:file_hints] iterated"]
    D --> E["&lt;code&gt;<%= hint[:path] %>&lt;/code&gt;"]
    E --> F{"Path length?"}
    F -- "Short path" --> G["Fits inline — no wrap needed"]
    F -- "Long path<br/>(e.g. deep nested file)" --> H["overflow-wrap: anywhere<br/>breaks at any character boundary"]
    H --> I["Path wraps within card ✓"]
    G --> I
    I --> J["Card stays within viewport<br/>No horizontal scroll"]

Loading

_{Reviews (1): Last reviewed commit: "Wrap generated demo file paths in onboar..." | Re-trigger Greptile}