feat: add `output_max_width` parameter to `set_env()`

pywebio/html/css/app.css

@@ -17,6 +17,10 @@
     max-width: 880px;
 }
 
+#input-cards{
+    max-width: 880px;
+}
+
 #output-container {
     -webkit-font-smoothing: antialiased;
     margin-bottom: 20px;

pywebio/session/__init__.py

@@ -487,13 +487,14 @@ def set_env(**env_info):
     * ``input_panel_min_height`` (int): The minimum height of input panel (in pixel, default 300px), it should be larger than 75px. Available only when ``input_panel_fixed=True``
     * ``input_panel_init_height`` (int): The initial height of input panel (in pixel, default 300px), it should be larger than 175px. Available only when ``input_panel_fixed=True``
     * ``input_auto_focus`` (bool): Whether to focus on input automatically after showing input panel, default is ``True``
+    * ``output_max_width`` (str): The max width of the page content area (in pixel or percentage, e.g. ``'1080px'``,``80%``. Default is 880px).
 
     Example::
 
         set_env(title='Awesome PyWebIO!!', output_animation=False)
     """
     from ..io_ctrl import send_msg
-    assert all(k in ('title', 'output_animation', 'auto_scroll_bottom', 'http_pull_interval',
+    assert all(k in ('title', 'output_animation', 'auto_scroll_bottom', 'http_pull_interval', 'output_max_width',
                      'input_panel_min_height', 'input_panel_init_height', 'input_panel_fixed', 'input_auto_focus')
                for k in env_info.keys())
     send_msg('set_env', spec=env_info)

webiojs/src/handlers/env.ts

@@ -34,12 +34,16 @@ export class EnvSettingHandler implements CommandHandler {
             state.InputPanelInitHeight = spec.input_panel_init_height;
         }
 
-        if(spec.input_panel_fixed !== undefined){
-            state.FixedInputPanel =  spec.input_panel_fixed;
+        if (spec.input_panel_fixed !== undefined) {
+            state.FixedInputPanel = spec.input_panel_fixed;
         }
 
-        if(spec.input_auto_focus !== undefined){
-            state.AutoFocusOnInput =  spec.input_auto_focus;
+        if (spec.input_auto_focus !== undefined) {
+            state.AutoFocusOnInput = spec.input_auto_focus;
+        }
+
+        if (spec.output_max_width !== undefined) {
+            $('#output-container').css('max-width', spec.output_max_width);
         }
     }
 }