by John Provasnik.
There is some
CSS you can apply to help with this. Particularly, limiting the width of images uploaded via text editor, adding a textbreak for long file names, etc...
This is for my custom theme, but you can see what may work for yours:
/* Adjustments to Quick Grading Screen Layout in Assignment Module */
/* No Submission for Grading Message */
.path-mod-assign td.submissionstatus,
.path-mod-assign div.submissionstatus,
.path-mod-assign a:link.submissionstatus {
border-radius: 6px;
padding: 2px;
border: 1px solid #cec8c8;
}
/* Submitted for Grading Message */
.path-mod-assign td.submissionstatussubmitted,
.path-mod-assign div.submissionstatussubmitted,
.path-mod-assign a:link.submissionstatussubmitted {
background-color: #fbeed5;
border-radius: 6px;
padding: 2px;
border: 1px solid #e4ca97;
}
/* Graded Grading Message */
.path-mod-assign td.submissiongraded,
.path-mod-assign div.submissiongraded {
border-radius: 6px;
padding: 2px;
border: 1px solid #adcead;
}
/* Early Submission Grading Message */
.path-mod-assign td.earlysubmission,
.path-mod-assign a:link.earlysubmission,
.path-mod-assign div.earlysubmission {
background-color: #d0e0f5;
border-radius: 6px;
padding: 2px;
border: 1px solid #89ccf3;
}
/* Late Submission Grading Message */
.path-mod-assign td.latesubmission,
.path-mod-assign a:link.latesubmission,
.path-mod-assign div.latesubmission {
border-radius: 6px;
padding: 2px;
border: 1px solid #c7a2a2;
}
/* Overdue Submission Grading Message */
.path-mod-assign div.overduesubmission,
.path-mod-assign div.overduesubmission font {
font-size: x-small;
}
/* Change Layout Order */
@media only screen and (min-width: 981px) {
/* Change Block & Question Section Order MacBook */
#page-mod-assign-grading #page-content {display: flex; flex-direction: column; flex-wrap: nowrap;}
#page-mod-assign-grading #region-main-box {order: 1;}
#page-mod-assign-grading #page-content.blocks-pre .columnleft {order: 2!important;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Change Block & Question Section Order iPad */
#page-mod-assign-grading #page-content {display: flex; flex-direction: column; flex-wrap: nowrap;}
#page-mod-assign-grading #region-main-box {order: 1;}
#page-mod-assign-grading #page-content.blocks-pre .columnleft {order: 2!important;}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
/* Change Block & Question Section Order iPhone */
#page-mod-assign-grading #page-content {display: flex; flex-direction: column; flex-wrap: nowrap;}
#page-mod-assign-grading #region-main-box {order: 1;}
#page-mod-assign-grading #page-content.blocks-pre .columnleft {order: 2!important;}
}
/* Fit all Columns on Screen */
@media (min-width: 768px) {
#page-mod-assign-grading #page-content.blocks-pre .region-main {max-width: 100%!important;}}
@media (min-width: 992px) {
#page-mod-assign-grading #page-content.blocks-pre .region-main {max-width: 100%!important;}}
/* Reset Table Preferences Button */
.resettable a {background: red; color: yellow; padding: 3px; border-radius: 5px;}
/* Correct the widths on Quick Grading screen due to long file names*/
#page-mod-assign-grading td[id^="mod_assign_grading"] td div a,
#page-mod-assign-grading td .no-overflow p
{word-break: break-all;}
/* Correct the widths on Quick Grading screen due to large Online Text images */
#page-mod-assign-grading .quickgradingform img {max-width: 600px; height: auto;}
/* Fit Quick Grading Page on Mobile Device */
@media only screen and (max-width: 500px) {
#page-mod-assign-grading table {background: white;}
#page-mod-assign-grading table.flexible td, .generaltable td {border-top: 0 solid black;}
#page-mod-assign-grading #region-main .no-overflow {width: unset;}
#page-mod-assign-grading table.generaltable thead {display: none;}
#page-mod-assign-grading .quickgradingform tr {display: flex; flex-flow: row; flex-wrap: wrap; border-bottom: 1px solid black; background: white;}
#page-mod-assign-grading .quickgradingform table.generaltable tr table tr {border-bottom: 0 solid black;}
}
/* Add Scroll Bar on the Grading Page */
#page-mod-assign-grading .region-main .no-overflow {overflow: visible;}
/* Rearrange Filter on Quick Grading Page */
#page-mod-assign-grading div[role="main"] {display: flex; flex-direction: column;}
#page-mod-assign-grading .groupselector {order: 1;}
#page-mod-assign-grading .gradingoptionsform {order: 2; padding-bottom: 0!important;}
#page-mod-assign-grading .quickgradingform {order: 3;}
#page-mod-assign-grading .gradingbatchoperationsform {order: 4;}
#page-mod-assign-grading .urlselect {order: 5; margin-left: 40px;}
/* Styles the Outer Group Selector Div */
#page-mod-assign-grading .groupselector .singleselect {
border-radius: 10px;
border: 2px solid black;
padding: 10px 10px 0 10px;
margin-top: 10px;
}
/* Un-Styles the Inner Group Selector Div */
#page-mod-assign-grading .groupselector .singleselect .singleselect {
border: 1px solid #ced4da;
border-radius: 5px;
padding: .375rem 1.75rem .375rem .75rem;}
/* Display Grading Options in a Row */
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix {display: flex; flex-direction: row;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_perpage {flex-direction: column;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_perpage .col-md-3 {min-width: 260px;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_filter {flex-direction: column;}
#page-mod-assign-grading .gradingoptionsform fieldset#id_general div.fcontainer.clearfix #fitem_id_filter .col-md-3 {min-width: 270px;}
