Scroll Problem #99

[kimdevz]

Solution : CSS Styling Adjustments

#root {
    height: 100vh; /* Viewport height */
}

.scrollable-container {
    overflow-y: scroll;
    border: 5px solid black;
    height: 800px;
}

Ensure that the style attribute on the container <div> where the robots are displayed is correctly set with overflow: scroll; and height: 800px;. This ensures that the content inside will scroll if it exceeds the container's height.

However, the parent container (<div id="root">) and any ancestor elements should not have conflicting height or overflow settings that might cause the scrolling behavior to fail.

Suggestion: Instead of using scrolling, I suggest using pagination. Pagination can improve the user experience by allowing users to navigate through smaller, more manageable chunks of content, rather than scrolling through long lists.