Going back to vanilla css

app/static/css/materialize.override.css

@@ -0,0 +1,63 @@
+/* #region sidenav-fixed */
+/*
+ * The sidenav-fixed class is used which causes the sidenav to be fixed and open
+ * on large screens and hides to the regular functionality on smaller screens.
+ * In order to prevent the sidenav to overlap the content, the content (header, main and footer)
+ * gets an offset equal to the width of the sidenav.
+ *
+ * Read more: https://materializecss.com/sidenav.html#variations
+ */
+body[data-sidenav-fixed="true" i] header,
+body[data-sidenav-fixed="true" i] main,
+body[data-sidenav-fixed="true" i] footer {
+  padding-left: 300px;
+}
+ 
+@media only screen and (max-width : 992px) {
+  body[data-sidenav-fixed="true" i] header,
+  body[data-sidenav-fixed="true" i] main,
+  body[data-sidenav-fixed="true" i] footer {
+    padding-left: 0;
+  }
+}
+
+body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
+  width: calc(100% - 300px);
+}
+
+@media only screen and (max-width : 992px) {
+  body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
+    width: 100%;
+  }
+}
+/* #endregion sidenav-fixed */
+
+/* #region sticky-footer */
+/*
+ * Sticky Footer: 
+ * A sticky footer always stays on the bottom of the page regardless of how
+ * little content is on the page. However, this footer will be pushed down if
+ * there is a lot of content, so it is different from a fixed footer.
+ *
+ * Note: This may cause issues in Internet Explorer which has weak support for
+ *       flexbox.
+ *
+ * Read more: https://materializecss.com/footer.html#sticky-footer
+ */
+ body[data-sticky-footer="true" i] {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+body[data-sticky-footer="true" i] main {
+  flex: 1 0 auto;
+}
+/* #endregion sticky-footer */
+
+/* #region other-overrides */
+::placeholder {
+  color: #9e9e9e;
+  opacity: 1;
+}
+/* #endregion other-overrides */