website icon indicating copy to clipboard operation
website copied to clipboard

Allow snippets windows to be resized.

Open johnsonmh opened this issue 6 years ago • 3 comments

The "Sample Code" windows leave a lot of empty space, and sometimes I want to expand the window to read the code better.

Being able to click and drag to accomplish a resize like this would be very helpful:

giphy-2

This is especially pertinent with the Flutter dartpad integration (issue link).

johnsonmh avatar Sep 16 '19 17:09 johnsonmh

A little more detail from DartPad-land -- we just integrated DartPad into the AppBar widget:

https://master-api.flutter.dev/flutter/material/AppBar-class.html

The width of the editor is definitely pretty tight, and adjusting the column layout to let it expand rightwards would provide a better experience. I wanted to do this when I added the snippet generator for DartPad, but didn't have enough working knowledge of the CSS in place to attempt it.

redbrogdon avatar Sep 16 '19 20:09 redbrogdon

I'm not sure where you all fell on this issue, but I found that hiding the right sidebar and shrinking the font on code pages made for a more ergonomic experience when reading the docs. Let me know if there is any way I could contribute to make this happen.

Without modifications: image

With right sidebar hidden and smaller code font: image

davidhicks980 avatar Oct 04 '22 06:10 davidhicks980

It is "technically" now possible to resize dartpad iframes (only vertically) on website. But even that is not working properly.

I can see a "resize" css attribute is used:

image

But its not holdable or dragable and on hovering mouse it doesn't even change the mouse pointer to indicate any action is possible. This happens in chrome and edge both.

In firefox, it doesn't display resize icon at all.

thisisjaymehta avatar Jun 21 '24 17:06 thisisjaymehta

This specific issue seems to be for api.flutter.dev where DartPad is also embedded. There have been a few improvements here:

  1. DartPad in api.flutter.dev uses a new embed layout with much less UI chrome, increasing space for the embedded DartPad.
  2. On narrow layouts, DartPad will instead switch to a tab-based layout allowing you to focus either the code or the output.
  3. api.flutter.dev added an override style allowing the content to take up the full page width, which results in the mentioned cases being much much wider.

I hope for now this results in a slightly improved experience, but if anyone still has new or existing issues, please open a new issue with updated context. Thanks!

parlough avatar Apr 11 '25 20:04 parlough