I’m new to NiceGUI, and I’m tying to build on the modular example. I have moved the theme.py file up a directory because I plan on reusing it with multiple applications. The problem that I’m having is that when I add multiple components to a page (I’m testing with the class_example.py file) the first and last components are partially hidden by the header and footer. For my testing, I’ve added multiple components to the class_example.py file that I plan on using in an app. I’ve included my theme.py file contents below.

from contextlib import contextmanager
from menu import menu
from side_menu import side_menu
from nicegui import ui

@contextmanager
def frame(navigation_title: str):
    """Custom page frame to share the same styling and behavior across all pages"""
    ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
    with ui.header(elevated=True):
        ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')
        ui.space()
        ui.label(navigation_title)
        ui.space()
        with ui.row():
            menu()
    with ui.column().classes('absolute-center items-center'):
        yield
    with ui.left_drawer().classes('bg-blue-100') as left_drawer:
        side_menu()
    with ui.footer().style('background-color: #3874c8'):
        ui.label('Test Footer')

I tried changing the ui.column.classes value from ‘absolute-center items-center’ to ‘items-center’ in the template.py file. This corrected the issue of the header and footer covering part of the other components, but now the components are not centered in the ui.column. I would like to keep everything in the ui.column centered and prevent components from being covered by the header and footer.