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;
}

[@Jyebra]

Wow I loved watching your video!!
I'm not really a programmer, but I'm learning little by little to manage my own Moodle platform.
The CSS you have made works perfectly for my small production platform.You are great!
Thank you very much for your time, for the video, for the CSS code and for your sense of humor!!

[@Wise-Cat]

Glad it was helpful! Like you, I'm not a programmer but a system administrator. It's a life of continuous learning, keep at it!
That CSS isn't really the best as it will cause issues on smaller screens and with longer activity names. So, be ready to tweak it more when you discover issues. Firefox's inspector gives you a good way to try tweaks out before making them live in the theme's SCSS. It is a rabbit hole though, and you can easily get hooked and spend hours playing with it (I've had that happen several times... great fun, but when you realise suddenly it's 3am, can be quite the shock).

[@Osaron14]

I didn't know you could do that in the "site administration" section. I thought you had to change the source code directly from the file, wherever you saved it. I have question related to something completely different... Is it possible to create a dashboard with information about the student's grades, course completion %, etc etc. Something that an admin or a teacher can review and maybe export any time, to track the students' journeys throughout a course.

[@Wise-Cat]

Hmm, I don't know of any way to get all of this information on one page, though the Custom reports feature may be useful to make several reports that could provide the information you're after.