Align Panel buttons on mobile and added responsive CSS

[Chng-Zhi-Xuan]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Enhancement to an existing feature

Part of MarkBind/markbind#335

What is the rationale for this request?
On mobile sites, Panel buttons are mis-aligned and the padding is too generous.

What changes did you make? (Give an overview)

• Change buttons' CSS to align them
• Trimmed padding and gave Panel headers more width when rendered on mobile.

Before	After

Is there anything you'd like reviewers to focus on?

• New responsive CSS

Testing instructions:

• Run npm run build and paste the updated vue-strap.min.js into MarkBind's asset folder.
• Run markbind init, author a panel with popup-url.
• Run markbind serve and reduce window size.
• Inspect the new Panel's style.

[yamgent]

LGTM 👍

[yamgent]

When the panels get smaller, the card title will "cover over" the buttons though.

[Chng-Zhi-Xuan]

As discussed, since CSS is unable to monitor the element's width, there is no solution, especially if the Panel is nested even more.

A future enhancement could be implementing a watcher and transform "squished" Panels to minimised buttons that opens a Modal view.