utils/mobile_responsive.py

# utils/mobile_responsive.py
"""Utilities for mobile responsiveness."""

import streamlit as st


def responsive_columns(sizes: list, mobile_sizes: list = None):
    """
    Creates responsive columns for Streamlit.
    On desktop, uses 'sizes'. On mobile, stacks columns or uses 'mobile_sizes'.
    """
    if mobile_sizes is None:
        mobile_sizes = [1] * len(sizes)  # Default to stacking if not specified

    # Check for mobile client (a bit hacky, but works for most cases)
    # Streamlit doesn't provide a direct way to detect mobile, so we rely on screen width
    # This might not be perfectly accurate but is generally effective.
    # We'll use JavaScript to pass screen width to Streamlit later if needed for more robust detection.

    # For now, let's assume if the app is run on a narrow screen, it's mobile.
    # This is often handled by CSS, but for column layout, Python-side adjustment can be useful.
    # A more robust solution would involve custom component for screen width detection.

    # Placeholder for actual mobile detection logic if implemented via JS/custom component
    # For now, we'll let CSS handle most of the responsiveness, and this function
    # will primarily provide a way to define column ratios.

    # For demonstration, we'll just return st.columns with the given sizes.
    # The actual mobile stacking will be handled by CSS in style.css.
    return st.columns(sizes)


def responsive_css():
    """Injects CSS for mobile responsiveness."""
    # This CSS is also defined in assets/style.css, but including it here
    # ensures it's applied, especially for column stacking.
    # In a real app, you'd load this from the assets file.
    css = """
    <style>
    /* Mobile-first responsive design */
    @media (max-width: 768px) {
        /* Stack columns on mobile */
        .row-widget.stHorizontal {
            flex-direction: column !important;
        }

        .row-widget.stHorizontal > div {
            width: 100% !important;
            margin-bottom: 1rem;
        }

        /* Full-width buttons on mobile */
        .stButton > button {
            width: 100% !important;
            min-height: 50px;
            font-size: 16px !important;
        }

        /* Responsive cards */
        .card {
            padding: 15px !important;
            margin: 10px 0 !important;
        }
    }
    </style>
    """
    return css