two styles for fullscreen&not fullscreen

main.css

@@ -8,19 +8,27 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 10px 5px;
+  margin: 10px;
+}
+
+.header.full {
+  margin: 15px 50px 5px;
 }
 
 .game-container {
   max-width: 500px;
-  min-height: 100vh;
+  min-height: calc(100vh - 80px);
   margin: 0 auto;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
+.game-container.full {
+  height: 100vh;
+}
+
 canvas {
   width: 100%;
 }

src/game.rs

@@ -5,10 +5,12 @@ use gloo_timers::callback::Interval;
 use rand::seq::SliceRandom;
 use rand::Rng;
 use web_sys::wasm_bindgen::JsValue;
-use web_sys::{CanvasRenderingContext2d, Event, HtmlCanvasElement, HtmlImageElement, PointerEvent};
+use web_sys::{
+    window, CanvasRenderingContext2d, Event, HtmlCanvasElement, HtmlImageElement, PointerEvent,
+};
 use yew::{
-    function_component, html, use_effect_with, use_mut_ref, use_node_ref, use_state, Callback,
-    Html, Properties, TargetCast,
+    classes, function_component, html, use_effect_with, use_memo, use_mut_ref, use_node_ref,
+    use_state, Callback, Html, Properties, TargetCast,
 };
 
 use crate::settings::Settings;
@@ -407,6 +409,15 @@ pub fn game(props: &Props) -> Html {
     let mw = use_state(|| props.mw);
     let mh = use_state(|| props.mh);
 
+    let is_full = use_memo(*is_moving, |_| {
+        window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .fullscreen_element()
+            .is_some()
+    });
+
     let v_onchange = {
         let v = v.clone();
         Callback::from(move |new_v| {
@@ -554,8 +565,8 @@ pub fn game(props: &Props) -> Html {
     }
 
     html! {
-        <div class="game-container">
-            <div class="header">
+        <div class={classes!("game-container", is_full.then_some("full"))}>
+            <div class={classes!("header", is_full.then_some("full"))}>
                 <div>
                     <img id="ballImage" src="static/ball.png" onload={img_onload} />
                     <span id="nBall">{ *n_balls_to_show }</span>

src/main.rs

@@ -16,7 +16,7 @@ fn app() -> Html {
             .as_f64()
             .unwrap()
             .min(500.0);
-        let hsize = window().unwrap().inner_height().unwrap().as_f64().unwrap() - 60.0;
+        let hsize = window().unwrap().inner_height().unwrap().as_f64().unwrap() - 55.0;
 
         (mw as f64 * hsize / wsize).floor() as usize
     });

src/settings.rs

@@ -17,6 +17,7 @@ pub fn settings(props: &Props) -> Html {
     let mh = use_state(|| props.mh);
     let v = use_state(|| props.v);
     let show_setting = use_state(|| false);
+
     let v_oninput = {
         let v = v.clone();
         props.v_onchange.reform(move |event: InputEvent| {