diff --git a/webapp/src/components/labThingsComponents/actionLogDisplay.vue b/webapp/src/components/labThingsComponents/actionLogDisplay.vue index 43bd0a16..364a8bfb 100644 --- a/webapp/src/components/labThingsComponents/actionLogDisplay.vue +++ b/webapp/src/components/labThingsComponents/actionLogDisplay.vue @@ -156,20 +156,26 @@ export default { /* Expanded view */ .log-wrapper { position: relative; - height: 200px; + flex: 1 1 200px; /* prefer 200px, but shrink if the container runs out of room */ + min-height: 2.6em; /* hard floor: roughly two lines of text */ overflow: hidden; margin-bottom: 0; margin-top: 0; + display: flex; + flex-direction: column; } .action-log-display { width: 100%; position: relative; - height: 90%; + flex: 1 1 auto; + min-height: 0; + display: flex; + flex-direction: column; } .log-summary { - padding: 1em; + padding: 0.6em; padding-right: 2.5em; /* reserve room for the toggle button, prevents overlap */ display: flex; align-items: center; @@ -180,7 +186,8 @@ export default { } .log-container { - height: 90%; + flex: 1 1 auto; + min-height: 0; overflow: auto; background-color: white; color: black; diff --git a/webapp/src/components/labThingsComponents/actionStatusModal.vue b/webapp/src/components/labThingsComponents/actionStatusModal.vue index 88ea7f42..899a793b 100644 --- a/webapp/src/components/labThingsComponents/actionStatusModal.vue +++ b/webapp/src/components/labThingsComponents/actionStatusModal.vue @@ -110,6 +110,7 @@ export default { place-content: stretch flex-start; align-items: center; width: 100%; + flex: 0 0 auto; } #progress-and-cancel-row .stretchy { @@ -130,7 +131,23 @@ export default { flex-direction: column; } +#status-modal h2 { + flex: 0 0 auto; // title never shrinks +} + +#status-modal .action-log-display { + flex: 1 1 auto; + min-height: 0; +} + +#status-modal .log-wrapper { + flex: 1 1 200px; // prefer 200px, shrink only under pressure + min-height: 2.6em; // floor: one line +} + #status-modal .log-container { - height: 10em; + height: auto; + flex: 1 1 auto; + min-height: 2.6em; }