Vertical space? Moodle in 2D?! On/Off the grid? Following the rabbit hole of .activity-grid.

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 */
.activity-item .activity-grid {
grid-template-columns: min-content min-content 1fr min-content min-content min-content;
grid-template-areas:
"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) */
.activity-item .activity-name-area {
white-space: nowrap;
}

/* Remove spacing and border from above the file metadata and set this to to nowrap */
.activity-item .activity-afterlink {
grid-area: afterlink;
margin-top: unset;
padding-top: unset;
border-top: unset;
white-space: nowrap;
}