In this response to a viewer question, I go down a rabbit hole looking at the CSS for activity items. Since the last time I saw that code, it appears Moodle has started to use CSS Grid in its layouts (just me who didn't notice this?). This has me a bit excited to see what future UX improvements will come given that grid is a rather handy tool for complex 2D layouts.
Checkout Kevin Powell's channel if you want more of that CSS Grid magic. He has a whole playlist of videos on grid: • CSS Grid videos
As for the solution to the original question, here is the CSS I made (not really ready for production) in this video.
/* Change the layout for the activity item grid */
.activityitem .activitygrid {
gridtemplatecolumns: mincontent mincontent 1fr mincontent mincontent mincontent;
gridtemplateareas:
"icon name afterlink groupmode completion actions"
"icon altcontent altcontent altcontent altcontent altcontent"
"icon availability availability availability availability availability";
}
/* Prevent the activity name from wrapping (likely to break some stuff) */
.activityitem .activitynamearea {
whitespace: nowrap;
}
/* Remove spacing and border from above the file metadata and set this to to nowrap */
.activityitem .activityafterlink {
gridarea: afterlink;
margintop: unset;
paddingtop: unset;
bordertop: unset;
whitespace: nowrap;
}