Maintain height of List elements

fatchat commented 2 months ago

Description

The Dalgo frontend uses a List component in several places:

Sources
Connections
Pipelines
and more

In some places, list items contain buttons which trigger an action, and when this happens the list items resize vertically causing the entire list to "jump" in the viewport

Goals

[ ] Maintain a consistent height for list elements

Expected Outcome

List items should stay in the same place when an action button is clicked. For example, this is the current view in the Connections screen

Before clicking an action:

After clicking an action:

Notice how the list items have less height in the second screenshot

Acceptance Criteria

[ ] List should not jump in Sources view
[ ] List should not jump in Connections view
[ ] List should not jump in Pipelines (Flows) view
[ ] List should not jump in dbt tasks view

Implementation Details

For each component which uses a List, determine the minimal height which accommodates all states of the list items. Pass this height into the List component and use it in the CSS to set

Mockups / Wireframes

None

Product Name

Dalgo

Project Name

Dalgo

Organization Name:

Project Tech4Dev

Domain

30 Other

Tech Skills Needed:

JavaScript, React

Mentor(s)

@fatchat

Complexity

Medium

Sub Category

Frontend, Beginner friendly

Akshat-Jaiswal-8 commented 2 months ago

Hey @fatchat , i would like to work on this issue. can you please assign this to me ? Also can you please guide me how can i reproduce this issue on my local ?

Vijay-vaswani16 commented 2 months ago

Hey @fatchat , i would like to work on this issue. Please assign this task to me ? Also if possible please guide me how can i reproduce this issue on my local ?

fatchat commented 2 months ago

Hello @Vijay-vaswani16 @Akshat-Jaiswal-8 Thank you for your interest I don't assign issues externally please submit a PR for review when you are ready I also don't provide guidance but I'm sure you can figure it out

Akshat-Jaiswal-8 commented 2 months ago

hey @fatchat , thanks for the reply. Also i think so i have figured it out but in order to test my solution i need to add a new connection and for that i need to add a new warehouse. Can you help me in that because i don't have credentials . thanks!

hariharan1309 commented 2 months ago

Hey @fatchat , I would like to work on this issue. I have faced similar situations and I have the resolved it so can you assign me this task. I'm proficient in Tailwind CSS and I can work on plain CSS as well . Looking forward to work with the issue.

fatchat commented 2 months ago

hello @hariharan1309 this issue already has a PR which we are close to merging, but thank you for your interest. btw we don't use tailwind (although it is an excellent library)

DalgoT4D / webapp