... hm. Ich habe auf einem meiner Moodles einen CSS-Hack für Moodle 3.x im Einsatz. Aber da waren Boost und Boost-Child-Themes noch 100% des Viewports breit und das Ein- und Ausblenden der Navigationsleiste links war halbwegs beherrschbar 
In Moodle 4.x gibt es nun die Navi-Leiste links nicht mehr in der alten Form (zumindest nicht außerhalb von Kursen), aber innerhalb der Kurse eine neue "drawer"-Logik: Links gibt es den Kurs-Index, rechts die Seitenblöcke. Die Seitenblöcke gibt es übrigens auch außerhalb von Kursen. Diese Konstruktion ist CSS-technisch deutlich komplexer als früher.
Daher kann ich nur einen Anstatz liefern, von dem aus Du gerne weiter experimntieren kannst:
Wenn man sich den Quelltext anschaut (z.B. mit den Entwicklertools, normalerweise [F12]), sieht man, dass der Knoten mit der ID #page (also der eigentliche Content) jeweils eine weitere Klasse (.show-drawer-left für den Kursindex und .show-drawer-right für die Seitenblöcke) erhält, wenn diese eingeblendet werden.
Bei Viewports >= 922 px Breite werden damit die seitlichen Abstände (margin-left und margin-right) des eigentlichen Seiteninhalts generiert, die den Breiten der beiden Leisten (links: 285px, rechts: 315px) entsprechen sollten. So wird der Contentbereich schmaler, wenn eine oder beide der Seitenleisten ein- und ausgeblendet werden.
Für Mobilgeräte bzw. schmalere Viewports < 922px Breite ist es dagegen so, dass die Seitenleisten den Content überdecken und nicht schmaler machen. Hier müsste man also die Breite für die Seitenblöcke ebenfalls anpassen, allerdings ohne dem Content einen seitlichen Abstand zu verpassen.
Man könnte also die (Mindest-)Breite der Seitenleisten (width und min-width jew. für .drawer-left und .drawer-right) für schmale Geräte (das CSS von Moodle 4.x ist "mobile first", also ist das die Standarddefinition) vergrößern. Und kann dann innerhalb einer sog. media query für Anzeigen >= 922 px (@media (min-width: 992px)) zusätzlich den Seitenabstand des Contentbereiches (margin-left bzw. margin-right von #page) vergrößern.
Als Einstieg in das kleine CSS-Abenteuer könntest Du also den folgenden Abschnitt (ruhig incl. der Kommentare /* ... */ zur Orientierung) kopieren und die Pixelangaben anpassen. %-Angaben (z.B. width:25%) gehen auch, davon würde ich aber abraten. In der Nähe von dem Breakpoint 922Px - also z.B. bei Bildschirmen mit 994px Breite - ist 25% recht wenig, auf 4K-Ultrawide-Monitoren aber erstaunlich viel. Die Rückbesinnung auf feste Pixelgrößen ist der Geräteunabhängigkeit geschuldet.
Der langen Rede kurzer Sinn: Für Seitenleisten mit z.B. 400px Breite sollte
/*Breite Seitenleiste links*/
.drawer.drawer-left {
width: 400px !important;
max-width: 400px !important;
}
/*Breite Seitenleiste rechts*/
.drawer.drawer-right {
width: 400px !important;
max-width: 400px !important;
}
@media (min-width: 992px) {
/*Seitenabstand links*/
#page.drawers.show-drawer-left {
margin-left: 400px !important;
}
/*Seitenabstand rechts*/
#page.drawers.show-drawer-right {
margin-right: 400px !important;
}
/*Seitenabstand links und rechts, wenn beide Seitenleisten sichtbar*/
#page.drawers.show-drawer-left.show-drawer-right {
margin-left: 400px !important;
margin-right: 400px !important;
}
}
funktionieren.
Aber bitte mit Vorsicht genießen, gut testen, Seiteneffekte auf Spezialseiten (z.B. mit Seitenblöcken aber ohne Kurs-Index oder umgekehrt) und bei verschiedenen Bildschirmgrößen berücksichtigen.
Auch für die Simulation verschiedener Geräte gibt es übrigens eine Browserfunktion (bei Chrome ist die "Gerätegrößensimulation" Teil der Entwicklerwerkzeuge, glaube ich, und in Firefox hilft [Strg] + [Shift] + [M].
Toitoitoi,
LG,M
