Make pipeline overview graph horizontally scrollable

fatchat commented 1 month ago

Description

The bar chart on the pipeline overview page shrinks as the page width is adjusted but this can make bars disappear. When this happens the user should be able to horizontally scroll to be able to see the entire chart

Here are two screenshots of the same bar chart on two different screen widths, notice that on the narrower one the chart is simply truncated

Goals

[ ] A horizontal scroll bar on each bar chart

Expected Outcome

Each bar chart on this page (and there could be several) should be horizontally scrollable

Acceptance Criteria

[ ] Scroll bar beneath each bar chart
[ ] When the screen is wide enough to accommodate the entire chart, the scroll bar should do nothing
[ ] When the screen is narrow enough that the bar chart gets truncated, the user should be able to scroll to see the entire chart
[ ] Scrolling one chart should not affect other charts on the page

Implementation Details

Start at src/pages/pipeline/index.tsx

Mockups / Wireframes

None

Product Name

Dalgo

Project Name

Dalgo

Organization Name:

Project Tech4Dev

Domain

30 Others

Tech Skills Needed:

ReactJS, CSS

Mentor(s)

@fatchat

Complexity

Low

Sub Category

Frontend, Beginner friendly

Akshat-Jaiswal-8 commented 1 month ago

Hey @fatchat , I have made the changes , could you please review it? Thanks.

Akshat-Jaiswal-8 commented 1 month ago

hey @fatchat , is there anything else , which needs to be done in this ?

fatchat commented 1 month ago

sorry i didn't check if the PR was linked to this issue. closing now

DalgoT4D / webapp