More flexible resizing for small screens

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;

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;
 }
 </style>