Fixing new session menu in the new interface

We faced some issues with the new interface when creating sessions and I’d like to share the CSS that we used to fix it.

The problem was in the form opened in the right-side tab, when pressing "New/assign" and "New session" in the "Course" "Sessions" menu:​​​​​​

• the buttons to navigate through the form (“cancel”, “next”, “previous”) were not visible
• the session evaluation list was condensed to the left side, leaving a lot of empty space in the right side

The solution found was to apply a custom CSS to make the buttons visible, preserving the original platform layout, to fix the bulleted list to occupy the entire space, maintaining the scrollbar visible, ensuring the last text is also visible, while keeping the code as least intrusive as possible:

/* New Session panel and radio list fix - START */

create-ilt-session-stepper .doc-layout-right-panel-content.ui-scrollable {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-bottom: 32px !important;
}

create-ilt-session-stepper .ilt-session-stepper > doc-shared-right-panel-actions {
    display: block !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    width: calc(100% - 16px) !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

create-ilt-session-stepper .ilt-session-stepper > doc-shared-right-panel-actions ui-panel-footer,
create-ilt-session-stepper .ilt-session-stepper > doc-shared-right-panel-actions .ui-panel-footer {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-top: 1px solid #e0e0e0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

create-ilt-session-stepper .ui-panel-footer-slot-end {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 8px 24px !important;
}

create-ilt-session-stepper doc-shared-right-panel-actions button,
create-ilt-session-stepper doc-shared-right-panel-actions ui-button-text,
create-ilt-session-stepper doc-shared-right-panel-actions .button-text-content {
    visibility: visible !important;
    opacity: 1 !important;
}

create-ilt-session-stepper .ilt-session-container .ui-input-radio-container {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

create-ilt-session-stepper .ui-input-radio-control {
    flex: 0 0 24px !important;
    margin-right: 8px !important;
}

create-ilt-session-stepper .ui-input-radio-info {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

create-ilt-session-stepper .ui-input-radio-label,
create-ilt-session-stepper .ui-input-radio-subtitle {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/* New Session panel and radio list fix - END */

Note that for future platform updates, this would become obsolete or would need a revision.