Fix layout issues for ace editor across tabs

src/jsMain/kotlin/ui/components/header/Header.kt

@@ -157,7 +157,7 @@ object HeaderStyle : StyleSheet("HeaderStyle", isStatic = true) {
  justifyContent = JustifyContent.start
  width = 100.pct
  height = HEADER_HEIGHT
- zIndex = 1
+ zIndex = 7
  top = 0.px
  position = Position.fixed
  backgroundColor = WHITE

src/jsMain/kotlin/ui/components/tabs/entrytab/ManualEntryTab.kt

@@ -135,9 +135,14 @@ class ManualEntryTab : RComponent<ManualEntryTabProps, ManualEntryTabState>() {
  }
  }
  props.validationOutcome?.let {
- validationSummary {
- polyglot = props.polyglot
- validationOutcome = props.validationOutcome!!
+ styledDiv {
+ css {
+ +ManualEntryTabStyle.resultsContainer
+ }
+ validationSummary {
+ polyglot = props.polyglot
+ validationOutcome = props.validationOutcome!!
+ }
  }
  }
  }
@@ -222,6 +227,11 @@ object ManualEntryTabStyle : StyleSheet("ManualEntryTabStyle") {
  flexDirection = FlexDirection.row
  alignItems = Align.center
  }
+ val resultsContainer by css {
+ display = Display.flex
+ flexDirection = FlexDirection.column
+ minHeight = 600.px
+ }
  val buttonBarDivider by css {
  width = 16.px
  }

src/jsMain/kotlin/ui/components/validation/FileValidationResults.kt

@@ -1,5 +1,6 @@
 package ui.components.validation
 
+import css.const.BORDER_GRAY
 import kotlinx.css.*
 import model.MessageFilter
 import model.ValidationMessage
@@ -93,15 +94,18 @@ object FileValidationResultsStyle : StyleSheet("FileValidationSummaryStyle", isS
  justifyContent = JustifyContent.start
  overflowY = Overflow.auto
  flexGrow = 1.0
- padding(horizontal = 16.px)
  media(query = "(min-width: 1200px) and (orientation:landscape)", block = ruleSet {
  flexDirection = FlexDirection.row
  })
  }
  val containerLeft by css {
  marginRight = 0.px
  marginBottom = 8.px
- width = 100.pct
+ borderColor = BORDER_GRAY
+ borderStyle = BorderStyle.solid
+ borderWidth = 1.px
+
+ height = LinearDimension.fillAvailable
  media(query = "(min-width: 1200px) and (orientation:landscape)", block = ruleSet {
  marginBottom = 0.px
  marginRight = 8.px

src/jsMain/kotlin/ui/components/validation/ValidationSummaryHeader.kt → src/jsMain/kotlin/ui/components/validation/ValidationResultDialogHeader.kt

@@ -11,12 +11,12 @@ import react.*
 import react.dom.attrs
 import styled.*
 
-external interface ValidationSummaryHeaderProps : Props {
+external interface ValidationResultDialogHeaderProps : Props {
  var filename: String
  var onClose: () -> Unit
 }
 
-class ValidationSummaryHeader : RComponent<ValidationSummaryHeaderProps, State>() {
+class ValidationResultDialogHeader : RComponent<ValidationResultDialogHeaderProps, State>() {
 
  override fun RBuilder.render() {
  styledDiv {
@@ -54,8 +54,8 @@ class ValidationSummaryHeader : RComponent<ValidationSummaryHeaderProps, State>(
 /**
  * React Component Builder
  */
-fun RBuilder.validationSummaryHeader(handler: ValidationSummaryHeaderProps.() -> Unit) {
- return child(ValidationSummaryHeader::class) {
+fun RBuilder.validationResultDialogHeader(handler: ValidationResultDialogHeaderProps.() -> Unit) {
+ return child(ValidationResultDialogHeader::class) {
  this.attrs(handler)
  }
 }

src/jsMain/kotlin/ui/components/validation/ValidationSummary.kt

@@ -8,9 +8,11 @@ import kotlinx.css.properties.border
 import model.MessageFilter
 import model.ValidationOutcome
 import react.*
+import react.dom.div
 import styled.StyleSheet
 import styled.css
 import styled.styledDiv
+import ui.components.tabs.heading
 import ui.components.validation.issuelist.issueFilterButtonBar
 
 external interface ValidationSummaryProps : Props {
@@ -30,24 +32,18 @@ class ValidationSummary : RComponent<ValidationSummaryProps, ValidationSummarySt
  }
 
  override fun RBuilder.render() {
- styledDiv {
- css {
- +ValidationSummaryStyle.mainContainer
- }
+
  styledDiv {
  css {
- +ValidationSummaryStyle.headerContainer
+ +ValidationSummaryStyle.filterMenuContainer
  }
- validationSummaryHeader {
- filename = props.validationOutcome.getFileInfo().fileName
- onClose = {
- props.onClose()
- }
+ heading {
+ text = props.polyglot.t("validation_results") + " (${state.messageFilter.determineNumberDisplayedIssues(props.validationOutcome.getMessages())}):"
  }
- }
- styledDiv {
- css {
- +ValidationSummaryStyle.filterMenuContainer
+  styledDiv {
+  css {
+  width = 16.px
+ }
  }
  issueFilterButtonBar {
  polyglot = props.polyglot
@@ -69,7 +65,7 @@ class ValidationSummary : RComponent<ValidationSummaryProps, ValidationSummarySt
  }
  }
  }
- }
+
 }
 
 /**
@@ -100,9 +96,9 @@ object ValidationSummaryStyle : StyleSheet("ValidationSummaryStyle", isStatic =
  }
  val filterMenuContainer by css {
  display = Display.flex
- flexDirection = FlexDirection.column
- justifyContent = JustifyContent.center
- padding(horizontal = 16.px)
+ flexDirection = FlexDirection.row
+ justifyContent = JustifyContent.left
+ //padding(horizontal = 16.px)
  }
  val resultsDiv by css {
  display = Display.flex

src/jsMain/kotlin/ui/components/validation/ValidationSummaryPopup.kt

@@ -28,11 +28,33 @@ class ValidationSummaryPopup : RComponent<ValidationSummaryPopupProps, State>()
  css {
  +ValidationSummaryPopupStyle.content
  }
- validationSummary {
- polyglot = props.polyglot
- validationOutcome = props.validationOutcome
- onClose = {
- props.onClose()
+ styledDiv {
+ css {
+ +ValidationSummaryStyle.mainContainer
+ }
+
+ styledDiv {
+ css {
+ +ValidationSummaryStyle.headerContainer
+ }
+ validationResultDialogHeader {
+ filename = props.validationOutcome.getFileInfo().fileName
+ onClose = {
+ props.onClose()
+ }
+ }
+ }
+ styledDiv {
+ css {
+ + ValidationSummaryPopupStyle.resultsContainer
+ }
+ validationSummary {
+ polyglot = props.polyglot
+ validationOutcome = props.validationOutcome
+ onClose = {
+ props.onClose()
+ }
+ }
  }
  }
  }
@@ -56,7 +78,7 @@ object ValidationSummaryPopupStyle : StyleSheet("ValidationSummaryPopupStyle", i
  val overlay by css {
  display = Display.flex
  position = Position.fixed
- zIndex = 2
+ zIndex = 8
  left = 0.px
  top = 0.px
  right = 0.px
@@ -66,6 +88,13 @@ object ValidationSummaryPopupStyle : StyleSheet("ValidationSummaryPopupStyle", i
  alignContent = Align.center
  quickFadeIn()
  }
+ val resultsContainer by css {
+ paddingLeft = 16.px
+ paddingRight = 16.px
+ display = Display.flex
+ flexDirection = FlexDirection.column
+ height = 100.pct - (72.px + 8.px)
+ }
  val content by css {
  display = Display.flex
  alignSelf = Align.center

src/jsMain/kotlin/ui/components/validation/issuelist/FilteredIssueEntryList.kt

@@ -33,9 +33,7 @@ class FilteredIssueEntryList : RComponent<FilteredIssueEntryListProps, FilteredI
  css {
  +FilteredIssueEntryListStyle.entryListContainer
  }
- heading {
- text = props.polyglot.t("validation_results") + " (${state.messageFilter.determineNumberDisplayedIssues(props.validationOutcome.getMessages())})"
- }
+
  issueFilterButtonBar {
  polyglot = props.polyglot
  messageFilter = state.messageFilter