code and stack improvements

visualisers/gmvis/public/css/main.css

@@ -25,35 +25,49 @@ body
 { margin: 0
 ; padding: 0
 ; overflow: scroll
+; display: flex
+; flex-direction: column
 }
 
 .pane-content
 { margin: 0.5em
 }
 
-.pane-content h5
+.view-header
 { margin: 0
-}
-
-.split-pane:has(> .stack-view)
-{ display: flex
-; flex-direction: column-reverse
+; flex-shrink: 0
 }
 
 .stack-view
 { display: flex
+; flex-direction: column
+; justify-content: space-between
+
+/* to fill the container */
+; flex-grow: 1
+}
+
+.stack-entry-container
+{ display: flex
 ; flex-direction: column-reverse
 ; align-content: flex-end
 }
 
-.stack-view > .stack-entry:nth-of-type(odd)
+.stack-entry-container.even > .stack-entry:nth-of-type(even)
 { background: #0000007f
+; color: white
+}
+
+.stack-entry-container.odd > .stack-entry:nth-of-type(odd)
+{ background: #0000007f
+; color: white
 }
 
 .stack-entry
 { display: flex
 ; flex-direction: row
 ; justify-content: space-between
+; font-family: monospace;
 }
 
 .stack-entry-addr
@@ -67,14 +81,46 @@ body
 .heap-view
 {}
 
+/* .split-pane:has(> .code-view) */
+/* { overflow: hidden */
+/* } */
+
 .code-view
+{ display: flex
+; flex-direction: column
+; align-items: stretch
+; align-content: stretch
+; justify-content: flex-start
+; flex-grow: 1
+}
+
+.code-view .code-instr-container
 { display: grid
+; overflow: scroll
+; flex-shrink: 4
+; min-height: 0
 }
 
-.code-view.instr
-{}
+.code-view .instr
+{ font-family: monospace;
+}
 
-.code-view > .instr:nth-of-type(odd)
+.code-instr-container.even > .instr:nth-of-type(even)
 { background: #0000007f
+; color: white
+}
+
+.code-instr-container.odd > .instr:nth-of-type(odd)
+{ background: #0000007f
+; color: white
+}
+
+.code-view .code-button-container
+{ display: flex
+; flex-direction: row
+/* ; align-self: flex-end */
+; justify-content: space-between
+; margin-top: auto
+; flex-shrink: 0
 }