---
# System prepended metadata

title: 1. Problem

---

# 1. Problem

When you want to edit or explore a product, you must first select that product in the products column; then it pops up the product details column

![Product items](https://i.imgur.com/AjVQMQF.png)

Where the products column is the center-most, and product details is right-most.

However, if you have a lot of products and you want to edit that product then you must first scroll down to that product and then scroll back up to the product details prompt.

![example](https://i.imgur.com/WVHsleC.png)

Here, you've selected the product but the product details are not immediately available (you'd have to scroll up to them).

Having to scroll down then up over and over again to view multiple products wastes a lot of time because of the scrolling. And it's generally annoying.

# 2. Solution

This can be implemented by putting the current columns into a [react-window](https://react-window.now.sh/#/examples/list/fixed-size); that is, allow for the position on the frame-window (the explorer) and the child-window (the products list) to be independent of each other; therefore, allowing you to be at the bottom of the product list while also being at the top of the details window at the same time and without any scrolling.

While perhaps out of the purview of this assignment, we can hide the scroll-bar and create seamless scrolling between columns (this specific feature will be ignored if time-constraints occur).