Jupyter Widget HACKS explained and to be fixed

[jakublala]

Below I give the explanation of the hacks employed to make the Jupyter Widget work and display properly. The styling not mentioned here is most probably just a custom design layout decision on how to make Chemiscope look adequately in the Jupyter Widget environment.

• [ ] #chemiscope-structure-and-info - keeps the structure viewer wide enough
• [ ] .chsp-meta .chsp-info-icon svg & .chsp-info-btns-svg - resizes and moves SVG icons to look at the right place
• [ ] #chemiscope-structure - keeps the structure viewer high/tall enough
• [ ] #chemiscope-meta-and-map - keep Plotly resizing when window resized is called
• [ ] .bootstrap-iso .modal-content .input-group > .form-control - ensure supercell input cell is wide enough to see anything
• [ ] .chsp-info-table - ensures info table is displayed properly
• [ ] .modal-dialog.modal-lg .bootstrap-iso & .modal-dialog .bootstrap-iso - makes the modal dialog windows narrower. the CSS specification is a bit of a hack as we cannot access the modal's GUID from CSS (possibly do it via JS/TS). also, bootstrap-iso width is changed as otherwise a white background of bootstrap remains wider than the narrow modal.
• [ ] .chsp-info-atom-btn and .chsp-info-structure-btn - returns the border from the buttons that for some reason dissappeared
• [ ] .chsp-atom-slider - changes the colour of the control on the environment indexer slider to green