fix: Background takes the entire page height

client/src/components/the_header.rs

@@ -33,13 +33,13 @@ pub fn TheHeader<'a, G: Html>(cx: Scope<'a>) -> View<G> {
                         "Fast Insiders"
                     }
                 }
-                div (class="grow text-left") {
+                div (class="text-left grow") {
                     a (id="header-all-transactions", href="/transactions", class="hover:underline") {
                         "All transactions"
                     }
                 }
                 div (class="flex-none") {
-                    button (on:click=toggle_dark_mode, class="mx-1 py-1 px-2 bg-slate-200 dark:bg-slate-800 rounded-full")
+                    button (on:click=toggle_dark_mode, class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800")
                     { "Toggle dark mode" }
                 }
             }

client/src/templates/index.rs

@@ -35,9 +35,17 @@ fn index_page<G: Html>(cx: Scope) -> View<G> {
             table_class: table_classes,
         };
 
+    let dark_mode_class = create_memo(cx, || {
+        if *global_state.dark_mode.get() {
+            "dark"
+        } else {
+            ""
+        }
+    });
+
     view! {cx,
-    main (class=if *global_state.dark_mode.get() { "dark" } else { "" }) {
-        div (class="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-100 font-sans") {
+        main (class=format!("{} flex flex-1", dark_mode_class)) {
+            div (class="flex-1 font-sans bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-100") {
                 TheHeader()
                 MainContentContainer(useless_prop=1) {
                     div(class="flex flex-wrap gap-4 justify-around") {

client/src/templates/transactions.rs

@@ -25,7 +25,6 @@ pub struct TransactionsPageState {
 #[auto_scope]
 fn transactions_page<G: Html>(cx: Scope, state: &TransactionsPageStateRx) -> View<G> {
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-    let dark_mode = &global_state.dark_mode;
 
     let expand = create_signal(cx, false);
     let filter_expand = BaseButtonStateRx {
@@ -73,14 +72,22 @@ fn transactions_page<G: Html>(cx: Scope, state: &TransactionsPageStateRx) -> Vie
         }
     });
 
+    let dark_mode_class = create_memo(cx, || {
+        if *global_state.dark_mode.get() {
+            "dark"
+        } else {
+            ""
+        }
+    });
+
     view! {cx,
-        main (class=if *dark_mode.get() { "dark" } else { "" }) {
-            div (class="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-100 font-sans") {
+        main (class=format!("{} flex flex-1", dark_mode_class)) {
+            div (class="flex-1 font-sans bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-100") {
                 TheHeader()
                 MainContentContainer(useless_prop=1) {
                     a (class="hover:underline", href="/transactions") {
                         h1 (
-                                class="text-center text-lg"
+                            class="text-lg text-center"
                            ) {
                             "Insider Transactions published by the AMF"
                         }

client/static/style.css

@@ -1,3 +1,20 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+div#root {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}

makefile

@@ -13,7 +13,7 @@ server-dev:
 
 tailwind:
 	cd client && \
-	tailwindcss -i static/style.css -o static/tailwind.css -w
+	tailwindcss -i static/style.css -o static/tailwind.css -w --minify
 
 serve:
 	cd client && \