dialog css wip

Author: functora

ghcjs/delivery-calculator/src/App/Widgets/Main.hs

@@ -21,6 +21,7 @@ mainWidget st =
     [ style_
         [ ("padding", "0"),
           ("margin", "0 auto"),
+          ("max-width", "100%"),
           ("min-height", "100vh"),
           ("display", "flex"),
           ("flex-direction", "column"),
@@ -32,7 +33,10 @@ mainWidget st =
     <> [ Flex.flexCol main_ id $ screenWidget st
        ]
     <> [ footer_
-          [ style_ [("text-align", "center")]
+          [ style_
+              [ ("text-align", "center"),
+                ("margin-bottom", "1rem")
+              ]
           ]
           $ tosWidget
           : br_ mempty

ghcjs/delivery-calculator/src/Main.hs

@@ -244,9 +244,10 @@ viewModel st =
         ],
       link_
         [ rel_ "stylesheet",
-          -- href_ "static/css/mvp.css"
+          -- href_ "https://unpkg.com/[email protected]/css/nes.min.css"
+          href_ "static/css/mvp.css"
           -- href_ "static/css/simple.min.css"
-          href_ "static/css/tacit-css-1.8.1.min.css"
+          -- href_ "static/css/tacit-css-1.8.1.min.css"
           -- href_ "node_modules/@lowlighter/matcha/dist/matcha.css"
         ],
       link_

ghcjs/delivery-calculator/static/css/app.css

@@ -3,21 +3,22 @@
 }
 
 html {
-  width: 100vw;
+  width: 100%;
   min-height: 100vh;
 }
 
-body {
-  padding: 0;
-  margin: 0 auto;
-}
-
 html,
 main {
   margin: 0;
   padding: 0;
 }
 
+body {
+  width: 100%;
+  padding: 0;
+  margin: 0 auto;
+}
+
 header,
 footer {
   margin-left: 0;
@@ -26,13 +27,25 @@ footer {
   padding-right: 0;
 }
 
+nav {
+  margin-bottom: 1rem;
+}
+
 textarea {
   resize: vertical;
   pointer-events: auto;
 }
 
 dialog {
+  width: 100%;
+  height: fit-content;
+  max-height: calc(100% - 4rem);
+  max-width: min(calc(100% - 4rem), 640px);
   overflow: auto;
+  padding: 1rem;
+  z-index: 9999;
+  position: initial;
+  transform: initial;
 }
 
 button {