While working on notebooks, I frequently feel it would be nice to increase the width of the cells. The default max cell width of ~954px seems a bit small while working on many of my notebooks on a large display. Switching to fullscreen is typically overkill. I haven’t figured out a way to override it within a notebook. Occasionally, I’ll resort to hacking an increased width using Chrome’s local overrides:
I’ve increased the --max-width-8 variable value which is applied to the .mw8 class in Observable’s styles. Admittedly, this is a very brittle solution. However, it’s nice that it is user customizable and not sharable.
I’m wondering if there’s a better method for changing notebook max width without using fullscreen. I would understand if this is a feature that the Observable team doesn’t feel comfortable allowing users to customize at a user or notebook level.
Increasing the max-width of notebooks is a little tricky because it means notebook authors may want to adjust the design of their notebooks for the wider display (if they want things to be “perfect”), but it might be something we do in the future.
We might also allow the editor to go wider than the content of the notebook, which would help when editing code cells with long lines.
If you have an especially large screen, you can do side-by-side editing by opening your notebook in safe mode in another window.
I’m thinking I’d rather use that extra real-estate for navigation aids. Table of contents, maybe also floating-widgets to control behavior (like a “Play/Pause” button, animation rate slider, etc.).
I would like the ability to create full-width cells. Currently, and several times before now, I’ve come into situations where it is a necessity.
In the end, my application will be run outside of Observable. But for now, while working on it, or when sharing it with my colleagues, I would like to take up all of the space that is available.
I am currently asking people to go into the menu in the top bar and click “View in fullscreen” whenever they load the page.
Bumping this up. I’d like the option to make cells full width: especially those used to display charts. Any solution, whether via CSS or UI/UX changes?
@josesho I would also like to bump this up if possible. We recently developed a dashboard using a custom fullscreen behavior and ui button (see link to discussion), but it would be nice to have an easier way to adjust the width of a single cell or just tell a cell to be full width (but I’m not sure how that would be implemented). “View in fullscreen” button within Observable cell