[ZEPPELIN-961] Longer names to the notebook make the name-text and buttons float outside the border.

[sagarkulkarni3592]

What is this PR for?

To correct the styling of notebook header which has notebook name, in case when the name is longer.
Feature : We should not limit the name size, but, while showing we can limit the name text to be shown.

What type of PR is it?

[Bug Fix]

Todos

What is the Jira issue?

ZEPPELIN-961

How should this be tested?

• Open any notebook.
• Give the long name.

Screenshots

Before bug fix :

After bug fix :

Questions:

• Does the licenses files need update? No.
• Is there breaking changes for older versions? No.
• Does this needs documentation? No.

[minahlee]

It would be better if we make it to be responsive to window width size.
Attaching my screenshot

[sagarkulkarni3592]

@minahlee Thank you for that suggestion.
What if we push all the buttons to the new div present on next line, like :

This will change the look.
If not, then we could adjust the shown name size.

[minahlee]

I would prefer to keep noteAction size as default height. As a Zeppelin user I prefer to see more of my work space than notebook name and buttons.

[sagarkulkarni3592]

I have adjusted the noteAction size by adjusting name component of the noteAction bar.

But, still there is a problem if the window size is reduced below that. It is because, all the buttons can not be fit in that div. So they overflow. Below is the screenshot if we don't show the name at all.

What should be the exact requirement in this case?

[minahlee]

@sagarkulkarni3592 Could you rebase and resolve conflicts?

[sagarkulkarni3592]

@minahlee Resolved the conflicts. Build is failing for non-related reasons.

[minahlee]

Thanks for the update. I see one more thing needs to be handled.
Could you make btn group not to cover input box in below screenshot?

[sagarkulkarni3592]

@minahlee Done the changes necessary to make the overlap go away.

[sagarkulkarni3592]

Also, observed this. When the notebook name is shorter, buttons appear far from the name or box as shown.

After the commit, it is made more dynamic.

[sagarkulkarni3592]

@minahlee Also merged it with the master branch.

[minahlee]

LGTM merging it into master and branch-0.6