fix: fill screen correctly and use correct node version

.github/workflows/check.yml

@@ -12,10 +12,10 @@ jobs:
         run: |
           rustup toolchain install nightly
           rustup update
-          rustup component add clippy
           cargo install --locked trunk
           rustup default nightly
           rustup target add wasm32-unknown-unknown
+          rustup component add clippy
       - name: Check
         run: cargo check
       - name: Build

Dockerfile

@@ -5,6 +5,7 @@ WORKDIR /metro_map_site
 ENV RUST_BACKTRACE=1
 
 RUN apt-get update \
+    && curl -sL https://deb.nodesource.com/setup_16.x | bash - \
     && apt-get install -y pkg-config libssl-dev nodejs npm \
     && cargo install --locked trunk \
     && rustup toolchain install nightly \

src/components/canvas.rs

@@ -3,7 +3,7 @@ use leptos::*;
 #[component]
 pub fn Canvas() -> impl IntoView {
     view! {
-        <div class="flex bg-zinc-50 dark:bg-neutral-700 text-black dark:text-white">
+        <div class="h-full w-full flex bg-zinc-50 dark:bg-neutral-700 text-black dark:text-white">
             <canvas id="canvas" class="grow m-5"/>
         </div>
     }

src/components/sidebar.rs

@@ -3,7 +3,7 @@ use leptos::*;
 #[component]
 pub fn Sidebar() -> impl IntoView {
     view! {
-        <div class="h-full w-full flex flex-column bg-zinc-100 py-2 shadow-right shadow-dark-mild dark:shadow-black dark:bg-neutral-750 text-black dark:text-white px-2">
+        <div class="h-full w-full flex flex-col bg-zinc-100 py-2 shadow-right shadow-dark-mild dark:shadow-black dark:bg-neutral-750 text-black dark:text-white px-2">
             <div class="px-3 py-3 w-full">sidebar</div>
         </div>
     }

src/main.rs

@@ -11,15 +11,17 @@ fn main() {
 #[component]
 fn App() -> impl IntoView {
     view! {
-        <header>
-            <Navbar/>
-        </header>
-        <div class="h-full flex flex-row justify-start items-center">
-            <div class="h-full flex-none w-1/5 md:w-52">
-                <Sidebar/>
-            </div>
-            <div class="h-full grow">
-                <Canvas/>
+        <div class="flex flex-col h-full">
+            <header>
+                <Navbar/>
+            </header>
+            <div class="grow flex flex-row justify-start">
+                <div class="flex-none self-start self-stretch w-1/5 md:w-52">
+                    <Sidebar/>
+                </div>
+                <div class="grow self-stretch">
+                    <Canvas/>
+                </div>
             </div>
         </div>
     }