Project

General

Profile

Support #97 » Bulk_GRV_CGRN_Results_Table_Horizontal_Scroll_Prompt.md

Prompt 01 Used for Enhancing the wizard - Rajesh Gotur, 09/04/2026 04:46 PM

 

Dedicated Prompt — Add Horizontal Scroll to Results Table

I have an existing Bulk GRV → CGRN Import Wizard that is already working correctly.

I need to fix one very small UI/usability issue only.

Issue

In the Step 4 — Results section, the results table can become wider than the available browser/window width when the table has wider columns or when header/column widths are increased.

Currently, when the table exceeds the available horizontal space, there is no horizontal scrollbar. As a result, some columns/content may become inaccessible, and the user may need to reload or otherwise adjust the page to access the full table.

Required Improvement

Make the existing Results table horizontally scrollable whenever its width exceeds the available container/viewport width.

The expected behavior is:

  • If the table fits within the available width, it should continue looking and behaving exactly as it does now.
  • If the table becomes wider than the available width, a horizontal scrollbar should be available.
  • The user should be able to scroll horizontally and access all columns and their contents.
  • The scrollbar should work naturally without requiring the page to be reloaded.
  • The table should remain usable on different browser/window widths.

Important Constraints

Do not change anything else.

Before modifying the code, inspect the existing implementation and identify how the Step 4 Results table is currently structured and styled.

Then make the smallest possible change required to provide horizontal scrolling.

Do not:

  • Redesign the table.
  • Change the table's columns.
  • Change column names.
  • Change table data.
  • Change sorting or filtering behavior.
  • Change Retry functionality.
  • Change CGRN navigation.
  • Change status/error handling.
  • Change backend/API logic.
  • Change existing business logic.
  • Introduce a new framework or library.
  • Perform unrelated refactoring.
  • Modify other wizard steps unnecessarily.

The existing table functionality and appearance should remain unchanged except for the addition of horizontal scrolling when needed.

Responsive Behavior

The solution should handle both cases correctly:

Normal width:
The table fits within the available space and looks as it currently does.

Overflow width:
When the table is wider than its available container, the user can horizontally scroll to view the hidden columns.

The horizontal scrolling should be contained appropriately within the existing Results-table area rather than causing the entire page layout to break.

Verification

After making the change, verify that:

  1. Step 4 still loads normally.
  2. The existing Results table data is unchanged.
  3. All existing columns remain present.
  4. Existing Retry buttons/actions continue working.
  5. Existing CGRN information/navigation continues working.
  6. The table can be horizontally scrolled when it exceeds the available width.
  7. No horizontal scrollbar is unnecessarily shown when the table already fits.
  8. The page does not require a reload to access the full table.
  9. No other wizard functionality or styling is affected.

Final Requirement

This is a very small UI enhancement, not a redesign.

Inspect the existing code first, understand the current table structure, and make the minimal targeted change necessary to add horizontal scrolling to the existing Step 4 Results table.

After implementing it, briefly explain which existing file/component was changed and confirm that no other functionality was modified.

(1-1/2)