Fix: expand maxWidth allow more humanName chars

[ezkemboi]

Overview

There is issue #694 that was raised and Assigned in September. Since it has been a while since it was assigned and not done, I felt that I could provide a solution.

• Fixes samples text (humanName) gets truncated for no reason #694

Demo

Notes

-> Simple way was to expand or allow stretching of maxWidth for humanName column. [Solution I went with], which seems to fix the horizontal scrollbar(I was unable to reproduce).
-> Another way was to make calculations based on the screen window.innerWidth and factor in the 25% that is max-width for the sidebar. Somehow complex.

Testing Instructions

• Pull the latest changes in the branch
• Run the app and check on sidebar sections [human Name message]
• Expected: it should not limit to 24 chars

[ezkemboi]

@ElinorW and @thewahome you can have a look at this PR.

[ElinorW]

Looks Good !

[thewahome]

On smaller screens, the width of the human name column pushes the documentation link button to the right and makes it not visible.

Possibly making the documentation occupy a fixed distance from the scrollbar would fix thix

[ezkemboi]

On smaller screens, the width of the human name column pushes the documentation link button to the right and makes it not visible.

Possibly making the documentation occupy a fixed distance from the scrollbar would fix thix

It was not easy getting a fixed distance for IColumn since when I passed currentWidth with no minWidth, it returned an error.
Instead, I realized maxWidth of humanName being 180 worked well with most screen except for larger screens more than 1280 width.
And I introduced a change of maxWidth based on the window screen width but making 180 as default.
I hope this approach is good @thewahome

[thewahome]

It was not easy getting a fixed distance for IColumn since when I passed currentWidth with no minWidth, it returned an error.
Instead, I realized maxWidth of humanName being 180 worked well with most screen except for larger screens more than 1280 width.
And I introduced a change of maxWidth based on the window screen width but making 180 as default.
I hope this approach is good @thewahome

Right now this implementation currently works on the very large screen but as I minimise, I notice that the documentation link gets lost. Which truly is a tricky thing to fix.
I think placing a listener on the window size would help us know for sure the size of the window so that we can create the width as a percentage of what we have as the sidebar width. What do you think @ezkemboi ?

[ezkemboi]

It was not easy getting a fixed distance for IColumn since when I passed currentWidth with no minWidth, it returned an error.
Instead, I realized maxWidth of humanName being 180 worked well with most screen except for larger screens more than 1280 width.
And I introduced a change of maxWidth based on the window screen width but making 180 as default.
I hope this approach is good @thewahome

Right now this implementation currently works on the very large screen but as I minimise, I notice that the documentation link gets lost. Which truly is a tricky thing to fix.
I think placing a listener on the window size would help us know for sure the size of the window so that we can create the width as a percentage of what we have as the sidebar width. What do you think @ezkemboi ?

I think that will be a good idea.
I will be adding the listener on the same.