Bug: Redundant 'Back' navigation link breaking page layout

[Daniel-Warner-X]

🐛 Bug Description

Summary:

On the 5th-level pages (ex 'Create RFE Workspace' and 'agentic-session...') page as well as any give RFE Workspace page, there is a 'Back ' link in the top center of the view. It is redundant with the breadcrumb control, sidebar nav control, and native browser back button. In some cases it shifts the page heading to the center of the view creating an inconsistency with other views that makes the view hard to scan and feel very WIP.

🔄 Steps to Reproduce

Navigate to the 'Create RFE Workspace' view or the page for any RFE Workspace that is already created. Observe how the heading is pushed toward the center of the page.

🖼️ Screenshots

🌍 Environment

The latest staging version: https://ambient-code.apps.rosa.vteam-stage.7fpc.p3.openshiftapps.com/

🔍 Possible Solution

Remove the 'Back' links from the fifth level pages.

✅ Acceptance Criteria

• Bug is reproduced and root cause identified
• Fix is implemented and tested
• Regression tests added to prevent future occurrences
• Documentation updated if needed
• Fix is verified in staging environment

🏷️ Labels

• Priority: [low/medium/high/critical]
• Complexity: [trivial/easy/medium/hard]
• Component: [frontend/backend/operator/tools/docs]

[bobbravo2]

@claude triage and come up with a root-cause-analysis for this bug. Come up with a fix plan to hand off to another agent.

[claude]

Claude finished @bobbravo2's task —— View job

---

Root Cause Analysis: Redundant 'Back' Navigation Link

Task List

• View screenshot to understand the visual issue
• Locate affected pages in codebase (Create RFE Workspace, RFE workspace pages)
• Find where 'Back' link is rendered
• Analyze layout structure and root cause
• Document root cause analysis
• Create fix plan for handoff

---

Visual Analysis

From the screenshot, I can see:

• Sidebar navigation (left) with project sections
• Breadcrumbs at top: Home > Projects > daniel-warner-test-project > RFE Workspaces > [current page]
• Redundant "Back to RFE Workspaces" link (circled in red) positioned below breadcrumbs
• Page heading pushed toward center of the page due to the back link being in a flex container with the heading

---

Root Cause

The redundant "Back" links are causing layout issues on 5th-level pages. The problem stems from three navigation mechanisms coexisting:

1. Breadcrumbs - Already providing hierarchical navigation at the top of each page
2. Sidebar navigation - Left sidebar with project sections
3. Redundant "Back" links - Explicit back buttons that duplicate breadcrumb functionality

Affected Files and Lines

RFE Workspace Pages:

1. components/frontend/src/app/projects/[name]/rfe/[id]/rfe-header.tsx:19-24

   • RFE detail page header component
   • Contains: "Back to RFE Workspaces" button
   • This component is used in /projects/[name]/rfe/[id]/page.tsx:252-257
   • Layout issue: Back button and heading are in a flex container causing the heading to shift right

2. components/frontend/src/app/projects/[name]/rfe/new/page.tsx:167-178

   • Create RFE Workspace page
   • Contains: "Back to RFE Workspaces" button
   • Same layout pattern: Back button and heading in flex container

Agentic Session Pages (also affected):
3. components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx:552, 580

• Session detail page
• Contains: "Back to Sessions" link (dynamic based on backLabel query param)

4. components/frontend/src/app/projects/[name]/sessions/new/page.tsx:207
   • Create new session page
   • Contains: "Back to Sessions" link

Why Layout Breaks

The layout issue occurs because the back button and heading are placed in a horizontal flex container (flex items-center gap-4). This causes:

• The back button takes up horizontal space on the left
• The heading gets pushed toward the center
• Inconsistent layout compared to pages without back buttons

Example from rfe-header.tsx:17-29:

<div className="flex items-start justify-between">
  <div className="flex items-center gap-4">
    <Link href={...}>
      <Button variant="ghost" size="sm">
        <ArrowLeft className="h-4 w-4 mr-2" />
        Back to RFE Workspaces
      </Button>
    </Link>
    <div>
      <h1 className="text-3xl font-bold">{workflow.title}</h1>
      <p className="text-muted-foreground mt-1">{workflow.description}</p>
    </div>
  </div>
  ...
</div>

---

Fix Plan for Implementation

Scope

Remove redundant "Back" navigation links from:

1. RFE workspace pages (2 files)
2. Agentic session pages (2 files)

Implementation Steps

Step 1: RFE Workspace Detail Page

• File: components/frontend/src/app/projects/[name]/rfe/[id]/rfe-header.tsx
• Action: Remove the back button from the flex container
• Lines to modify: 17-29
• New layout:

  <div className="flex items-start justify-between">
    <div>
      <h1 className="text-3xl font-bold">{workflow.title}</h1>
      <p className="text-muted-foreground mt-1">{workflow.description}</p>
    </div>
    <Button variant="destructive" size="sm" onClick={onDelete} disabled={deleting}>
      {/* Delete button remains */}
    </Button>
  </div>

Step 2: Create RFE Workspace Page

• File: components/frontend/src/app/projects/[name]/rfe/new/page.tsx
• Action: Remove the back button, keep only the heading
• Lines to modify: 167-178
• New layout:

  <div className="mb-8">
    <h1 className="text-3xl font-bold">Create RFE Workspace</h1>
    <p className="text-muted-foreground">Set up a new Request for Enhancement workflow with AI agents</p>
  </div>

Step 3: Session Detail Page

• File: components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx
• Action: Remove back button (appears in two places - lines 552 and 580)
• Note: Check if backHref and backLabel state variables are still needed after removal

Step 4: Create New Session Page

• File: components/frontend/src/app/projects/[name]/sessions/new/page.tsx
• Action: Remove back button (line 207)
• Layout: Adjust heading layout to be consistent with other pages

Testing Checklist

After implementation:

• Verify RFE workspace detail page: heading is left-aligned, no layout shift
• Verify Create RFE Workspace page: heading is left-aligned, consistent with other pages
• Verify session detail page: layout is consistent
• Verify create session page: layout is consistent
• Confirm breadcrumbs are functioning correctly on all affected pages
• Verify sidebar navigation still works
• Test responsive layout on mobile/tablet viewports
• Run frontend build: npm run build (should pass with 0 errors, 0 warnings)

Design Rationale

• Breadcrumbs provide sufficient hierarchical navigation
• Sidebar navigation provides quick access to project sections
• Removing redundant back buttons creates a cleaner, more consistent UI
• Left-aligned headings improve scannability and match the rest of the application

---

Additional Context

This issue is categorized as:

• Priority: Medium (affects UX consistency but not functionality)
• Complexity: Easy (simple component layout changes, no logic changes)
• Component: Frontend (Next.js/React)

The fix is straightforward: remove the back link components and adjust the flex container layouts to left-align headings. No breaking changes to functionality - users still have breadcrumbs and sidebar for navigation.

---