fix: Remove vertical scroll overflow in todo example

py/examples/background.py

@@ -15,7 +15,7 @@ def blocking_function(secs) -> str:
 @app('/demo')
 async def serve(q: Q):
     if q.args.start:
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.progress('Running...')])
+        q.page['form'] = ui.form_card(box='1 1 6 2', items=[ui.progress('Running...')])
         await q.page.save()
 
         seconds = random.randint(1, 6)
@@ -27,8 +27,8 @@ async def serve(q: Q):
         # Do this instead:
         message = await q.run(blocking_function, seconds)
 
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.message_bar('info', message)])
+        q.page['form'] = ui.form_card(box='1 1 6 1', items=[ui.message_bar('info', message)])
         await q.page.save()
     else:
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.button(name='start', label='Start')])
+        q.page['form'] = ui.form_card(box='1 1 2 1', items=[ui.button(name='start', label='Start')])
         await q.page.save()

py/examples/background_executor.py

@@ -16,7 +16,7 @@ def blocking_function(secs) -> str:
 @app('/demo')
 async def serve(q: Q):
     if q.args.start:
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.progress('Running...')])
+        q.page['form'] = ui.form_card(box='1 1 6 2', items=[ui.progress('Running...')])
         await q.page.save()
 
         seconds = random.randint(1, 6)
@@ -33,8 +33,8 @@ async def serve(q: Q):
         # with concurrent.futures.ProcessPoolExecutor() as pool:
         #    message = await q.exec(pool, blocking_function, seconds)
 
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.message_bar('info', message)])
+        q.page['form'] = ui.form_card(box='1 1 6 1', items=[ui.message_bar('info', message)])
         await q.page.save()
     else:
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.button(name='start', label='Start')])
+        q.page['form'] = ui.form_card(box='1 1 2 1', items=[ui.button(name='start', label='Start')])
         await q.page.save()

py/examples/background_progress.py

@@ -51,5 +51,5 @@ async def serve(q: Q):
         form.items = [ui.message_bar('info', message)]
         await q.page.save()
     else:
-        q.page['form'] = ui.form_card(box='1 1 12 10', items=[ui.button(name='start', label='Start')])
+        q.page['form'] = ui.form_card(box='1 1 2 2', items=[ui.button(name='start', label='Start')])
         await q.page.save()

py/examples/button.py

@@ -25,7 +25,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 8', items=[
             ui.button(name='basic_button', label='Basic'),
             ui.button(name='primary_button', label='Primary', primary=True),
             ui.button(name='link_button', label='Link', link=True),

py/examples/buttons.py

@@ -15,7 +15,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 5', items=[
             ui.buttons([
                 ui.button(name='primary_button', label='Primary', primary=True),
                 ui.button(name='standard_button', label='Standard'),

py/examples/checkbox.py

@@ -18,7 +18,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.checkbox(name='checkbox_unchecked', label='Not checked'),
             ui.checkbox(name='checkbox_checked', label='Checked', value=True),
             ui.checkbox(name='checkbox_indeterminate', label='Indeterminate', indeterminate=True),

py/examples/checklist.py

@@ -13,7 +13,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.checklist(name='checklist', label='Choices',
                          choices=[ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']]),
             ui.button(name='show_inputs', label='Submit', primary=True),

py/examples/choice_group.py

@@ -20,7 +20,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])

py/examples/color_picker.py

@@ -13,7 +13,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.color_picker(name='color', label='Pick a color', value='#F25F5C'),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])

py/examples/combobox.py

@@ -19,7 +19,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
                         choices=combobox_choices),
             ui.combobox(name='combobox_required', label='Enter or choose a color', placeholder='Color...', value='Blue',

py/examples/counter_broadcast.py

@@ -18,6 +18,6 @@ async def serve(q: Q):
         form = q.page['example']
         form.items = items
     else:
-        q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=items)
 
     await q.page.save()

py/examples/counter_global.py

@@ -20,6 +20,6 @@ async def serve(q: Q):
         form = q.page['example']
         form.items = items
     else:
-        q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=items)
 
     await q.page.save()

py/examples/counter_multicast.py

@@ -18,6 +18,6 @@ async def serve(q: Q):
         form = q.page['example']
         form.items = items
     else:
-        q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=items)
 
     await q.page.save()

py/examples/counter_unicast.py

@@ -9,7 +9,7 @@ async def serve(q: Q):
     count = q.client.count or 0
 
     if not q.client.initialized:
-        q.page['example'] = ui.form_card(box='1 1 12 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
             ui.button(name='increment', label=f'Count={count}')
         ])
         q.client.initialized = True

py/examples/date_picker.py

@@ -16,7 +16,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.date_picker(name='date', label='Standard date picker', value='2017-10-19'),
             ui.date_picker(name='date_placeholder', label='Date picker with placeholder', placeholder='Pick a date'),
             ui.date_picker(name='date_disabled', label='Disabled date picker', value='2017-10-19', disabled=True),

py/examples/date_picker_trigger.py

@@ -16,7 +16,7 @@ def get_form_items(value: Optional[str]):
 @app('/demo')
 async def serve(q: Q):
     if not q.client.initialized:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=get_form_items(None))
+        q.page['example'] = ui.form_card(box='1 1 4 5', items=get_form_items(None))
         q.client.initialized = True
     else:
         q.page['example'].items = get_form_items(q.args.date_trigger)

py/examples/dropdown.py

@@ -27,7 +27,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.dropdown(name='dropdown', label='Pick one', value='B', required=True, choices=choices),
             ui.dropdown(name='dropdown_multi', label='Pick multiple', values=['B', 'D'], required=True,
                         choices=choices),

py/examples/file_upload.py

@@ -14,7 +14,7 @@ async def serve(q: Q):
         ])
     else:
         q.page['example'] = ui.form_card(
-            box='1 1 4 10',
+            box='1 1 4 7',
             items=[
                 ui.file_upload(name='file_upload', label='Upload!', multiple=True,
                                file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)

py/examples/file_upload_compact.py

@@ -14,7 +14,7 @@ async def serve(q: Q):
         ])
     else:
         q.page['example'] = ui.form_card(
-            box='1 1 4 10',
+            box='1 1 4 7',
             items=[
                 ui.file_upload(name='file_upload', label='Select one or more files to upload', compact=True,
                                multiple=True, file_extensions=['jpg', 'png'], max_file_size=1, max_size=15),

py/examples/form.py

@@ -40,7 +40,7 @@ def rnd():
 
 @app('/demo')
 async def serve(q: Q):
-    q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+    q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[
         ui.text_xl(content='Extra-large text, for headings.'),
         ui.text_l(content='Large text, for sub-headings.'),
         ui.text_m(content='Body text, for paragraphs and other content.'),

py/examples/form_frame_path.py

@@ -6,9 +6,9 @@
 page = site['/demo']
 
 page['example'] = ui.form_card(
-    box='1 1 6 5',
+    box='1 1 -1 -1',
     items=[
-        ui.frame(path='https://example.com', height='400px')
+        ui.frame(path='https://example.com', height='450px')
     ]
 )
 

py/examples/form_visibility.py

@@ -7,7 +7,7 @@
 @app('/demo')
 async def serve(q: Q):
     if not q.client.initialized:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 7', items=[
             ui.text_xl(content='First text'),
             ui.text_l(content='Second text'),
             ui.text_m(content='Third text'),

py/examples/frame_path.py

@@ -6,7 +6,7 @@
 page = site['/demo']
 
 page['example'] = ui.frame_card(
-    box='1 1 6 5',
+    box='1 1 -1 -1',
     title='Example',
     path='https://example.com',
 )

py/examples/image.py

@@ -41,7 +41,7 @@
 
 page = site['/demo']
 page['example1'] = ui.image_card(
-    box='1 1 3 5',
+    box='1 1 2 4',
     title='An image',
     type='png',
     image=image,
@@ -51,7 +51,7 @@
 # The example below constructs the data URL from the base64-encoded
 #   used in the previous example.
 page['example2'] = ui.image_card(
-    box='1 6 3 5',
+    box='3 1 2 4',
     title='An image',
     path=f"data:image/png;base64,{image}",
 )

py/examples/image_annotator.py

@@ -13,12 +13,12 @@ async def serve(q: Q):
             ui.button(name='back', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 9 -1', items=[
+        q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[
             ui.image_annotator(
                 name='annotator',
                 title='Drag to annotate',
                 image='https://images.pexels.com/photos/2696064/pexels-photo-2696064.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
-                image_height='700px',
+                image_height='280px',
                 tags=[
                     ui.image_annotator_tag(name='p', label='Person', color='$cyan'),
                     ui.image_annotator_tag(name='f', label='Food', color='$blue'),

py/examples/issue_tracker.py

@@ -44,7 +44,7 @@ def make_issue_table(allow_multiple_selection=False):
 
 async def edit_multiple(q: Q):
     q.page['form'] = ui.form_card(
-        box='1 1 4 10',
+        box='1 1 6 7',
         items=[
             make_issue_table(allow_multiple_selection=True),  # This time, allow multiple selections
             ui.buttons([
@@ -59,7 +59,7 @@ async def edit_multiple(q: Q):
 
 async def show_issues(q: Q):
     q.page['form'] = ui.form_card(
-        box='1 1 4 10',
+        box='1 1 4 7',
         items=[
             make_issue_table(),
             ui.buttons([ui.button(name='edit_multiple', label='Edit Multiple...', primary=True)]),
@@ -75,7 +75,7 @@ async def show_issue(q: Q, issue_id: str):
     q.client.active_issue_id = issue_id
 
     q.page['form'] = ui.form_card(
-        box='1 1 4 10',
+        box='1 1 4 4',
         items=[
             ui.text_xl(f'Issue {issue.id}'),
             ui.text(issue.text),

py/examples/label.py

@@ -7,7 +7,7 @@
 page = site['/demo']
 
 page['example'] = ui.form_card(
-    box='1 1 4 10',
+    box='1 1 4 7',
     items=[
         ui.label(label='Standard Label'),
         ui.label(label='Required Label', required=True),

py/examples/link.py

@@ -7,7 +7,7 @@
 page = site['/demo']
 
 page['example'] = ui.form_card(
-    box='1 1 4 10',
+    box='1 1 4 7',
     items=[
         ui.link(label='Internal link', path='/starred'),
         ui.link(label='Internal link, new tab', path='/starred', target=''),

py/examples/markdown_table.py

@@ -35,7 +35,7 @@ def make_markdown_table(fields, rows):
 page = site['/demo']
 
 v = page.add('example', ui.form_card(
-    box='1 1 4 5',
+    box='1 1 4 8',
     items=[
         ui.text(make_markdown_table(
             fields=air_passengers_fields,

py/examples/message_bar.py

@@ -7,7 +7,7 @@
 page = site['/demo']
 
 page['example'] = ui.form_card(
-    box='1 1 3 10',
+    box='1 1 3 7',
     items=[
         ui.message_bar(type='blocked', text='This action is blocked.'),
         ui.message_bar(type='error', text='This is an error message'),

py/examples/meta_dialog.py

@@ -8,7 +8,7 @@
 async def serve(q: Q):
     if not q.client.initialized:
         q.page['meta'] = ui.meta_card(box='')
-        q.page['example'] = ui.form_card(box='1 1 12 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
             ui.button(name='show_dialog', label='Order donuts', primary=True)
         ])
         q.client.initialized = True

py/examples/meta_script.py

@@ -50,7 +50,7 @@
 
 # Add a placeholder for the animation.
 page['example'] = ui.markup_card(
-    box='1 1 10 8',
+    box='1 1 6 8',
     title='Animation',
     content=html,
 )

py/examples/meta_side_panel.py

@@ -8,7 +8,7 @@
 async def serve(q: Q):
     if not q.client.initialized:
         q.page['meta'] = ui.meta_card(box='')
-        q.page['example'] = ui.form_card(box='1 1 11 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
             ui.button(name='show_side_panel', label='Order donuts', primary=True)
         ])
         q.client.initialized = True

py/examples/meta_side_panel_closable.py

@@ -10,7 +10,7 @@ async def serve(q: Q):
         # Create an empty meta_card to hold the side panel
         q.page['meta'] = ui.meta_card(box='')
         # Display a button to show the side panel
-        q.page['example'] = ui.form_card(box='1 1 11 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
             ui.button(name='show_side_panel', label='Open side panel', primary=True)
         ])
         q.client.initialized = True

py/examples/meta_tracking.py

@@ -15,7 +15,7 @@ async def serve(q: Q):
         # That's all you need to do - set up a tracker.
         # The rest of this example does not do anything special related to tracking.
 
-        q.page['example'] = ui.form_card(box='1 1 12 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
             ui.button(name='increment', label=f'Count={count}')
         ])
         q.client.initialized = True

py/examples/picker.py

@@ -13,7 +13,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 5', items=[
             ui.picker(name='picker', label='Place an order (try Spam, Eggs or Ham):', choices=[
                 ui.choice(name='spam', label='Spam'),
                 ui.choice(name='eggs', label='Eggs'),

py/examples/picker_selection.py

@@ -13,7 +13,7 @@ async def serve(q: Q):
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        q.page['example'] = ui.form_card(box='1 1 4 5', items=[
             ui.picker(name='picker', label='Picker with initial values', choices=[
                 ui.choice(name='spam', label='Spam'),
                 ui.choice(name='eggs', label='Eggs'),

py/examples/plot_bokeh.py

@@ -33,7 +33,7 @@
 
 page = site['/demo']
 page['example'] = ui.frame_card(
-    box='1 1 5 8',
+    box='1 1 -1 -1',
     title='Hexbin for 500 points',
     content=html,
 )