[Refactor]: Height for log explorer list panel

[Rajat-Dabade]

Fix the height issue for logs.

Screen.Recording.2024-03-07.at.12.44.28.PM.mov

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[YounixM]

@Rajat-Dabade: Please add an RCA around. It will help in understanding the internal functioning and requirement for change.

[Rajat-Dabade]

Root Cause Analysis (RCA):

Issue Description:
The last <div> element within a flex container does not take up the full remaining height, despite setting display: flex; and flex-direction: column; on the container.

As you can see in the image the last div is not taking the full height available.

Root Cause:

The reason for the last <div> not taking the full remaining height within the flex container is due to the default behaviour of flex items in a flex container. By default, flex items do not automatically stretch to fill the remaining space along the cross-axis (in this case, the vertical axis since the flex-direction is set to column).

Analysis:
Flexbox Behavior: In a flex container with flex-direction: column; , the main axis runs vertically from top to bottom, while the cross-axis runs horizontally. By default, flex items only occupy the height required by their content along the cross-axis.

Lack of Flex Grow Property: Without explicitly specifying the flex: 1 property on the last <div> element, it does not have instructions to expand and fill the remaining space within the flex container along the cross-axis.

Solution:

To address the issue and ensure that the last <div> takes up the full remaining height within the flex container, the flex: 1 property needs to be applied to the last <div> element. Setting flex: 1; set flex-grow: 1 on the last

instructs it to expand and fill the remaining space along the cross-axis, thereby resolving the issue.