Improvement/bandswidget sizewarning

[AndresOrtegaGuerrero]

This PR address #820

The idea I have is to include a javascript that just check if the width and display a message if the size is too narrow.

I am not well knowledgable in JavaScript ( I got a lot of help on this one from ChatGPT) Please let me know any suggestions or ideas you might have in mind to address this issue ?

@edan-bainglass @superstar54

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.87%. Comparing base (73f2534) to head (23b01a0).
Report is 88 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #839      +/-   ##
==========================================
+ Coverage   67.84%   67.87%   +0.02%     
==========================================
  Files          50       50              
  Lines        4503     4507       +4     
==========================================
+ Hits         3055     3059       +4     
  Misses       1448     1448              

Flag	Coverage Δ
python-3.11	67.87% <100.00%> (+0.02%)	⬆️
python-3.9	67.90% <100.00%> (+0.02%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[edan-bainglass]

Using CSS, you could modify the overflow-x property of the plot's container. This will add a horizontal scroll bar when the full container does not fit the screen.

[AndresOrtegaGuerrero]

@edan-bainglass Something like this ?

Now the question is showing the scrolling horizontal bar is enough , or if there is the need of the warning displayed as well.

@cpignedoli

[edan-bainglass]

Looks good. Enough in my option.

[AndresOrtegaGuerrero]

Now the question , is should we do it only for electronic structure , or include PDOS tab as well ?

[superstar54]

Now the question , is should we do it only for electronic structure , or include PDOS tab as well ?

If possible, it would be good for all the widgets to have a scroll bar on a small screen.

[superstar54]

Add a layout with a fixed width should already add the scroll bar on a small screen.

Suggested change

	plot_container = ipw.HTML(
	"""
	<div style='overflow-x: auto; width: 80%; max-width: 80%;'>
	<!-- Placeholder for the Plotly plot widget -->
	</div>
	"""
	)
	_bands_dos_widget.layout = ipw.Layout(width="1000px")
	self.children = [
	ipw.VBox(
	[
	plot_container, # The scrollable container
	_bands_dos_widget, # The actual Plotly widget
	]
	)
	]
	_bands_dos_widget.layout = ipw.Layout(width="1000px")
	self.children = [
	_bands_dos_widget, # The actual Plotly widget
	]

[AndresOrtegaGuerrero]

But then the bar is enough , or do we want a warning too ?

[superstar54]

Ah, the plot_container is used for the warning message. Sorry, I misunderstood it.

I think the bar is enough.

[superstar54]

Thanks for the work! LGTM!