adjust layout and show ELOG page with relevant procedure

templates/common.css

@@ -1,79 +1,80 @@
-body, html {
-    height: 100%;
+  body, html {
     margin: 0;
     padding: 0;
-    background-color: #f7f7f7;
+    font-family: system-ui, sans-serif;
+    background: #f5f5f5;
+  }
+
+  .page {
     display: flex;
-}
-
-.svg-container {
-    flex: 2;
+    align-items: stretch; /* right column stretches to match left column's natural height */
     height: 100%;
-    position: relative;
-    display: flex;
-}
+  }
 
-#pump-svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-    border-radius: 12px;
-}
-
-.control-panel {
-    flex: 1;
+  /* LEFT COLUMN: a flex column whose width shrinks to fit its widest
+     child. Since align-items defaults to "stretch", the other two
+     divs will stretch to match whatever width the svg establishes. */
+  .left {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 10px;
-    background-color: #B8EBE5;
-}
+    width: fit-content; /* shrink-to-fit content, i.e. the svg's width */
+  }
 
-.control-panel p {
-      font-size: 20px;
-      font-family:verdana;
-}
+  .left > div {
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-sizing: border-box;
+  }
 
+  .top {
+    padding: 0.75rem 1rem;
+    text-align: center;
+  }
 
-.control-panel h {
-      font-size: 32px;
-      font-family:verdana;
-}
+  /* No padding here: the textarea itself becomes the full-width/height
+     box, so its dimensions can match the svg's rendered size exactly. */
+  .bottom {
+    padding: 0;
+  }
 
-.button-container {
-    display: flex;
-    flex-direction: rows;
-    gap: 10px;
-    margin-bottom: 20px;
-    font-size: 20px;
-    font-family:verdana;
-}
-
-.control-button {
-    padding: 10px;
-    background-color: #AFB0B1;
-    color: black;
+  .bottom textarea {
+    display: block;
+    width: 100%;      /* matches .bottom's width, which the flex-stretch
+                          already ties to the svg's width */
+    box-sizing: border-box;
     border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    width: 100px;
-    font-weight: bold;
-}
+    border-radius: inherit;
+    padding: 0.75rem 1rem;
+    font: inherit;
+    resize: none;      /* prevent the user from breaking the matched size */
+  }
 
-.control-button:hover {
-    background-color: #DADBDC;
-}
+  .svg-wrap {
+    padding: 0; /* let the svg define the box exactly */
+    line-height: 0; /* avoid extra inline-svg whitespace gap */
+  }
 
-#outputtext {
-    width: 100%;
-    height: 200px;
-    resize: none;
-}
+  .svg-wrap svg {
+    display: block;
+    /* intrinsic size set via width/height attributes below */
+  }
 
-.content-container {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    margin-bottom: 20px;
-}
+  /* RIGHT COLUMN: takes remaining horizontal space AND stretches to
+     match the left column's full height (via .page's align-items: stretch) */
+  .right {
+    flex: 1;
+    display: flex;      /* so the iframe can fill 100% of it */
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    padding: 0;
+    overflow: hidden;   /* keep the iframe's corners inside the rounded border */
+  }
+
+  .right iframe {
+     flex: 1;
+     width: 100%;
+     height: 100%;
+     border: none;
+   }