Fixed footer being pushed down in editor pages

marlowe-playground-client/src/HaskellEditor/View.purs

@@ -12,7 +12,7 @@ import Data.String (Pattern(..), split)
 import Data.String as String
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML)
-import Halogen.Classes (aHorizontal, codeEditor, group)
+import Halogen.Classes (aHorizontal, codeEditor, group, fullHeight)
 import Halogen.Classes as Classes
 import Halogen.Extra (renderSubmodule)
 import Halogen.HTML (HTML, button, code_, div, div_, option, pre_, section, select, slot, text)
@@ -34,7 +34,7 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div_
+  div [ class_ fullHeight ]
     [ section [ class_ (ClassName "code-panel") ]
         [ div [ classes [ codeEditor ] ]
             [ haskellEditor state ]

marlowe-playground-client/src/JavascriptEditor/View.purs

@@ -11,7 +11,7 @@ import Data.String (Pattern(..), split)
 import Data.String as String
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML)
-import Halogen.Classes (aHorizontal, codeEditor, group)
+import Halogen.Classes (aHorizontal, codeEditor, group, fullHeight)
 import Halogen.Classes as Classes
 import Halogen.Extra (renderSubmodule)
 import Halogen.HTML (HTML, a, button, code_, div, div_, option, pre_, section, select, slot, text)
@@ -33,7 +33,7 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div_
+  div [ class_ fullHeight ]
     [ section [ class_ (ClassName "code-panel") ]
         [ div [ classes [ codeEditor ] ]
             [ jsEditor state ]

marlowe-playground-client/src/Main.purs

@@ -51,16 +51,5 @@ main =
       $ matchesWith (Routing.parse Router.route) \old new -> do
           when (old /= Just new) $ launchAff_ $ driver.query (MainFrame.ChangeRoute new unit)
 
--- FIXME: This was not doing anything... should we remove? add a comment for future use?
--- forkAff $ runProcess watchLocalStorageProcess
--- watchLocalStorageProcess :: Process Aff Unit
--- watchLocalStorageProcess = connect LocalStorage.listen watchLocalStorage
--- watchLocalStorage ::
---   forall r.
---   Consumer RawStorageEvent Aff r
--- watchLocalStorage =
---   consumer \event -> do
---     liftEffect $ log $ "Got Local Storage Event: " <> show event
---     pure Nothing
 onLoad :: Unit
 onLoad = unsafePerformEffect main

marlowe-playground-client/src/MainFrame/View.purs

@@ -12,7 +12,7 @@ import Halogen.ActusBlockly as ActusBlockly
 import Halogen.Classes (aHorizontal, active, flex, fontSemibold, fullHeight, fullWidth, group, hide, noMargins, smallSpaceBottom, spaceLeft, spaceRight, text3xl, textWhite, uppercase, vl)
 import Halogen.Classes as Classes
 import Halogen.Extra (renderSubmodule)
-import Halogen.HTML (ClassName(ClassName), HTML, a, div, div_, h1_, h2, header, hr_, main, section, slot, span, text)
+import Halogen.HTML (ClassName(ClassName), HTML, a, div, div_, footer_, h1_, h2, header, hr_, main, section, slot, span, text)
 import Halogen.HTML.Events (onClick)
 import Halogen.HTML.Properties (class_, classes, href, id_, target)
 import Halogen.SVG (GradientUnits(..), Translate(..), d, defs, gradientUnits, linearGradient, offset, path, stop, stopColour, svg, transform, x1, x2, y2)
@@ -72,7 +72,7 @@ render state =
           ]
       , modal state
       , globalLoadingOverlay
-      , div [ classes [ ClassName "footer" ] ]
+      , footer_
           [ div [ classes [ flex, ClassName "links" ] ]
               [ a [ href "https://cardano.org/", target "_blank" ] [ text "cardano.org" ]
               , vl
@@ -115,7 +115,7 @@ render state =
 
   isActiveTab activeView = if isActiveView activeView then [ active ] else []
 
-  tabContents activeView contents = if isActiveView activeView then div [ classes [ fullHeight, Classes.scroll ] ] contents else div [ classes [ hide ] ] contents
+  tabContents activeView contents = if isActiveView activeView then div [ classes [ fullHeight ] ] contents else div [ classes [ hide ] ] contents
 
   topBar = div [ class_ (ClassName "global-actions") ] ([ menuBar state ] <> otherActions (state ^. _view))
 

marlowe-playground-client/src/MarloweEditor/View.purs

@@ -9,7 +9,7 @@ import Data.Lens ((^.))
 import Data.Maybe (Maybe(..))
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML)
-import Halogen.Classes (codeEditor, group)
+import Halogen.Classes (codeEditor, group, fullHeight)
 import Halogen.Extra (renderSubmodule)
 import Halogen.HTML (HTML, button, div, div_, option, section, select, slot, text)
 import Halogen.HTML.Events (onClick, onSelectedIndexChange)
@@ -28,7 +28,7 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div_
+  div [ class_ (fullHeight) ]
     [ section [ class_ (ClassName "code-panel") ]
         [ div [ classes [ codeEditor ] ]
             [ marloweEditor state ]

marlowe-playground-client/src/SimulationPage/View.purs

@@ -18,7 +18,7 @@ import Data.Tuple.Nested ((/\))
 import Effect.Aff.Class (class MonadAff)
 import Effect.Class (liftEffect)
 import Halogen (RefLabel(..))
-import Halogen.Classes (aHorizontal, bold, btn, codeEditor, expanded, flex, fullHeight, group, justifyBetween, justifyCenter, noMargins, plusBtn, scroll, sidebarComposer, smallBtn, smallSpaceBottom, spaceBottom, spaceRight, spanText, textSecondaryColor, textXs, uppercase)
+import Halogen.Classes (aHorizontal, bold, btn, codeEditor, expanded, flex, fullHeight, group, justifyBetween, justifyCenter, noMargins, plusBtn, sidebarComposer, smallBtn, smallSpaceBottom, spaceBottom, spaceRight, spanText, textSecondaryColor, textXs, uppercase)
 import Halogen.Extra (renderSubmodule)
 import Halogen.HTML (ClassName(..), ComponentHTML, HTML, aside, b_, br_, button, div, div_, em_, h6, h6_, input, li, li_, p, p_, section, slot, span, span_, strong_, text, ul)
 import Halogen.HTML.Events (onClick, onValueChange)
@@ -42,7 +42,7 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div [ classes [ fullHeight, scroll, ClassName "simulation-panel" ] ]
+  div [ classes [ fullHeight, ClassName "simulation-panel" ] ]
     [ section [ class_ (ClassName "code-panel") ]
         [ div [ classes [ codeEditor ] ]
             [ marloweEditor state ]

marlowe-playground-client/static/css/layout.scss

@@ -2,13 +2,37 @@ html,
 body,
 .site-wrap {
   background: var(--bg-light);
+  // The properties from here on set the layout of the page.
+  // The site-wrap is the topmost element, and it should always
+  // ocupy the full height of the screen.
+  height: 100vh;
+
+  // We use a grid system to keep the header and footer always
+  // at the top and bottom without needing to define margins or
+  // positions absolutes.
+  display: grid;
+  // Only one column of the whole width
+  grid-template-columns: 1fr;
+  // Three named rows with headers and footer equal to the space they need (auto)
+  // and the main content occupies the remaining space.
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    'header'
+    'main'
+    'footer';
+
 }
 
+header {
+  // Indicate which row of the .site-wrap grid to use
+  grid-area: header;
+}
 main {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  height: 100%;
+  // overflow: hidden;
+  // Indicate which row of the .site-wrap grid to use
+  grid-area: main;
 
   hr {
     margin: 0em 0.5em 0.5em 0.5em;
@@ -19,21 +43,16 @@ main {
   }
 }
 
-main nav {
-  flex: 1;
-}
-
-main section {
-  flex: 15;
-}
 
-.sidebar-composer,
 .code-editor {
-  height: 90vh;
+  height: 100%;
   overflow-x: scroll;
 }
 
-.footer {
+footer {
+  // Indicate which row of the .site-wrap grid to use
+  grid-area: footer;
+
   display: flex;
   height: 54px;
   justify-content: space-between;

marlowe-playground-client/static/css/panels.scss

@@ -79,6 +79,7 @@
 
 .code-panel {
   display: flex;
+  height: 100%;
 }
 
 .code-editor {