Make container grow to body and html

package.json

@@ -56,11 +56,13 @@
     "@react-aria/utils": "^3.14.1",
     "downshift": "^6.1.7",
     "framer-motion": "^6.3.3",
+    "purescript": "^0.15.7",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-intersection-observer": "^9.1.0",
     "react-popper": "^2.3.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-virtuoso": "^3.1.4"
+    "react-virtuoso": "^3.1.4",
+    "spago": "^0.20.9"
   }
 }

src/Yoga/Block.purs

@@ -98,6 +98,7 @@ cluster_ = cluster {}
 container ∷ ∀ p q. Union p q Container.Props ⇒ ReactComponent { | p }
 container = Container.component
 
+-- component 
 cover' ∷ ∀ p q. Union p q Cover.Props ⇒ ReactComponent { | p }
 cover' = Cover.component
 

src/Yoga/Block/Container/Style.purs

@@ -10,6 +10,7 @@ import Data.String as String
 import Data.Symbol (class IsSymbol, reflectSymbol)
 import Effect (Effect)
 import Effect.Uncurried (EffectFn2, runEffectFn2)
+import Fahrtwind (heightFull, widthFull)
 import Foreign.Object (Object)
 import Foreign.Object as Object
 import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmap, hmapWithIndex)
@@ -24,6 +25,9 @@ import Web.HTML (Window, window)
 import Web.HTML.HTMLDocument as HTMLDocument
 import Web.HTML.Window (document)
 
+containerStyle ∷ Style
+containerStyle = widthFull <> heightFull
+
 data DarkOrLightMode
   = DarkMode
   | LightMode
@@ -88,7 +92,8 @@ getDarkOrLightMode =
     else if pv == "light" then
       LightMode # pure
     else do
-      prefersDarkMediaQuery ← matchMedia "(prefers-color-scheme: dark)" win # lift
+      prefersDarkMediaQuery ← matchMedia "(prefers-color-scheme: dark)" win #
+        lift
       ifM (matches prefersDarkMediaQuery # lift)
         (DarkMode # pure)
         (LightMode # pure)

src/Yoga/Block/Icon/SVG/Spinner2.purs

@@ -0,0 +1,46 @@
+module Yoga.Block.Icon.SVG.Spinner2 where
+
+import React.Basic (JSX)
+import React.Basic.DOM as R
+import React.Basic.DOM.SVG as SVG
+
+spinner2 :: JSX
+spinner2 = SVG.svg
+     { width: "24"
+     , height: "24"
+     , xmlns: "http://www.w3.org/2000/svg"
+     , children: 
+     [ SVG.style
+       { children: 
+       [ R.text "@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}"
+       ]
+       }
+     , SVG.circle
+       { className:"spinner_nOfF"
+       , cx: "4"
+       , cy: "12"
+       , r: "3"
+       }
+     , SVG.circle
+       { className:"spinner_nOfF"
+       , cx: "4"
+       , cy: "12"
+       , r: "3"
+       , style: R.css { animationDelay: "-.5s" }
+       }
+     , SVG.circle
+       { className:"spinner_nOfF"
+       , cx: "4"
+       , cy: "12"
+       , r: "3"
+       , style: R.css { animationDelay: "-1s" }
+       }
+     , SVG.circle
+       { className:"spinner_nOfF"
+       , cx: "4"
+       , cy: "12"
+       , r: "3"
+       , style: R.css { animationDelay: "-1.5s" }
+       }
+     ]
+     }

src/Yoga/Block/Icon/SVG/spinner2.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}</style><circle class="spinner_nOfF" cx="4" cy="12" r="3"/><circle class="spinner_nOfF" cx="4" cy="12" r="3" style="animation-delay:-.5s"/><circle class="spinner_nOfF" cx="4" cy="12" r="3" style="animation-delay:-1s"/><circle class="spinner_nOfF" cx="4" cy="12" r="3" style="animation-delay:-1.5s"/></svg>