use padding instead of margin with new page layout

api_docs_and_examples.py

@@ -778,7 +778,7 @@ You can call `ui.run()` with optional arguments:
 - `title` (default: `'NiceGUI'`)
 - `favicon`: relative filepath to a favicon (default: `None`, NiceGUI icon will be used)
 - `dark`: whether to use Quasar's dark mode (default: `False`, use `None` for "auto" mode)
-- `main_page_classes`: configure Quasar classes of main page (default: `'q-ma-md column items-start'`)
+- `main_page_classes`: configure Quasar classes of main page (default: `'q-pa-md column items-start'`)
 - `binding_refresh_interval`: time between binding updates (default: `0.1` seconds, bigger is more cpu friendly)
 - `show`: automatically open the ui in a browser tab (default: `True`)
 - `reload`: automatically reload the ui on file changes (default: `True`)

nicegui/config.py

@@ -12,6 +12,6 @@ class Config():
     reload: bool = True
     favicon: Optional[str] = None
     dark: Optional[bool] = False
-    main_page_classes: str = 'q-ma-md column items-start gap-4'
+    main_page_classes: str = 'q-pa-md column items-start gap-4'
     binding_refresh_interval: float = 0.1
     excludes: List[str] = field(default_factory=list)

nicegui/page.py

@@ -29,7 +29,7 @@ class Page(jp.QuasarPage):
                  *,
                  favicon: Optional[str] = None,
                  dark: Optional[bool] = ...,
-                 classes: str = 'q-ma-md column items-start gap-4',
+                 classes: str = 'q-pa-md column items-start gap-4',
                  css: str = HtmlFormatter().get_style_defs('.codehilite'),
                  on_connect: Optional[Callable] = None,
                  on_page_ready: Optional[Callable] = None,
@@ -165,7 +165,7 @@ class page:
         *,
         favicon: Optional[str] = None,
         dark: Optional[bool] = ...,
-        classes: str = 'q-ma-md column items-start gap-4',
+        classes: str = 'q-pa-md column items-start gap-4',
         css: str = HtmlFormatter().get_style_defs('.codehilite'),
         on_connect: Optional[Callable] = None,
         on_page_ready: Optional[Callable] = None,
@@ -180,7 +180,7 @@ class page:
         :param title: optional page title
         :param favicon: optional relative filepath to a favicon (default: `None`, NiceGUI icon will be used)
         :param dark: whether to use Quasar's dark mode (defaults to `dark` argument of `run` command)
-        :param classes: tailwind classes for the container div (default: `'q-ma-md column items-start gap-4'`)
+        :param classes: tailwind classes for the container div (default: `'q-pa-md column items-start gap-4'`)
         :param css: CSS definitions
         :param on_connect: optional function or coroutine which is called for each new client connection
         :param on_page_ready: optional function or coroutine which is called when the websocket is connected;  see `"Yield for Page Ready" <https://nicegui.io/#yield_for_page_ready>`_ as an alternative.

nicegui/run.py

@@ -22,7 +22,7 @@ def run(self, *,
         title: str = 'NiceGUI',
         favicon: Optional[str] = None,
         dark: Optional[bool] = False,
-        main_page_classes: str = 'q-ma-md column items-start gap-4',
+        main_page_classes: str = 'q-pa-md column items-start gap-4',
         binding_refresh_interval: float = 0.1,
         show: bool = True,
         reload: bool = True,