fix graph info layout on small screens (nodes/edges not rendering and create graph missing)

[Naseem77]

[overcut-ai]

Completed Working on "Automated Ticket Triage "

✅ Triage completed for issue #1647. Applied labels: bug, needs-info. No duplicate was identified at similarity ≥ 0.75. Missing information includes reproducible steps, environment details, viewport/breakpoint specifics, and expected vs actual behavior.

✅ Workflow completed successfully.

---

👉 View complete log

[overcut-ai]

Completed Working on "Auto Root Cause Analysis"

✅ Workflow completed successfully.

---

👉 View complete log

[overcut-ai]

Root Cause Analysis (RCA)

Thanks for the report. We analyzed the graph page/layout code paths related to small screens and found a likely UI composition regression rather than a backend rendering failure.

Summary of likely root cause

1. Responsive panel constraints can starve/clip usable graph/info area on small screens.
   • The graph UI combines a left graph-info panel and right-side functional panels with non-trivial minimum sizes. On narrow viewports this can cause graph info/actions to be clipped or pushed out of view, and users may perceive nodes/edges as “not rendering”.
2. “Create graph missing” is at least partly due to conditional UI behavior.
   • The create graph trigger is intentionally hidden in read-only mode.
3. Node/edge counters are intentionally reset during refresh.
   • Counts are set to undefined before fetch and shown as loading; in constrained layouts this can appear as “missing”.

Evidence (code)

• app/graph/graphInfo.tsx
  • Header controls and create button are in a tight single-row flex layout.
  • CreateGraph button is only rendered when !isReadOnly.
  • Nodes/edges display loader when counts are undefined.
• app/providers.tsx
  • Graph info panel is inside a resizable/collapsible panel with min/max constraints.
  • Count fetch flow resets counts to undefined before refetch.
• app/graph/page.tsx
  • Graph view is composed with additional right-side resizable panels with minimum widths.

(Recent broad UI changes in this area are consistent with possible layout regression risk.)

---

Minimal safe fix suggestion

Goal: Improve small-screen resilience and prevent “create graph missing” confusion without broad refactor.

*** app/providers.tsx ***
@@
- minSize="15%"
+ minSize="12%"

*** app/graph/graphInfo.tsx ***
@@
- <div className="w-full flex gap-2 items-center">
+ <div className="w-full flex flex-wrap gap-2 items-center">
@@
- className="hover:!bg-primary/70 p-1"
+ className="hover:!bg-primary/70 p-1 shrink-0"

*** app/graph/page.tsx ***
+ Add a mobile-only fallback CreateGraph trigger near the top Selector
+ (hidden for read-only), reusing existing CreateGraph component/state setters.

This keeps the fix UI-scoped and low-risk.

Risk assessment

• Risk level: Low
• UI-only adjustments (layout constraints + existing component placement), no backend/API behavior changes.

Test recommendations

• Small viewport (e.g., 375x812): verify graph info panel usability, create button visibility, and graph content not visually starved.
• Read-only session: verify create trigger remains hidden.
• Normal session: verify create graph works from side panel and mobile fallback trigger.
• Regression: verify nodes/edges counters still update correctly after refresh.

Confidence

0.84 (medium-high)

• Strong code evidence for responsive layout + conditional rendering effects.
• Remaining uncertainty: original report has screenshot only (no repro steps/device/browser details).

If useful, we can follow up with an implementation PR for the minimal patch above.