ui/styles.py

CSS_STYLE = """
/* Use full page width */
.gradio-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 24px;
}

/* Image box stability */
#image-box {
    max-height: 300px;
}

#image-box img {
    object-fit: contain;
}

/* Output box stability */
#output-box textarea {
    min-height: 180px;
    max-height: 240px;
}

/* Prevent columns from collapsing */
.gradio-row {
    gap: 24px;
}

/* Mobile responsiveness */
@media (max-width: 900px) {
    .gradio-row {
        flex-direction: column;
    }
}

/* Reduce vertical gaps in right panel */
#right-panel .gradio-form {
    gap: 8px !important;
}

/* Tighten spacing between label and component */
#right-panel label {
    margin-bottom: 4px !important;
}

/* Remove excess top spacing above textbox */
#output-box {
    margin-top: -4px !important;
}

/* Compact textbox padding slightly */
#output-box textarea {
    padding-top: 8px !important;
}

"""