From 6807e961188edae98b46ca503ec950c6b421db17 Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Fri, 15 Nov 2024 13:58:03 +1100
Subject: [PATCH] Use ResizeOberver to fit size of terminal

---
 src/ImageBuilder.jsx           | 42 +++++++++++++++++++++++-----------
 src/components/form/fields.jsx |  9 ++++----
 src/form.css                   | 18 +--------------
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/ImageBuilder.jsx b/src/ImageBuilder.jsx
index f98b3a1..b773cb1 100644
--- a/src/ImageBuilder.jsx
+++ b/src/ImageBuilder.jsx
@@ -54,7 +54,10 @@ async function buildImage(repo, ref, term, fitAddon) {
 
 function ImageLogs({ setTerm, setFitAddon, name }) {
   const terminalId = `${name}--terminal`;
+  const observedElementRef = useRef(null);
+
   useEffect(() => {
+    let observer;
     async function setup() {
       const { Terminal } = await import("xterm");
       const { FitAddon } = await import("xterm-addon-fit");
@@ -75,12 +78,24 @@ function ImageLogs({ setTerm, setFitAddon, name }) {
       setTerm(term);
       setFitAddon(fitAddon);
       term.write("Logs will appear here when image is being built");
+
+      if (observedElementRef.current) {
+        observer = new ResizeObserver(() => {
+          console.log("resize");
+          fitAddon.fit();
+        });
+        observer.observe(observedElementRef.current);
+      }
     }
     setup();
+
+    return () => {
+      if (observer) observer.disconnect();
+    }
   }, []);
 
   return (
-    <div className="terminal-container">
+    <div className="terminal-container" ref={observedElementRef}>
       <div id={terminalId}></div>
     </div>
   );
@@ -147,21 +162,22 @@ export function ImageBuilder({ name, isActive }) {
   // don't generate the hidden input that posts the built image out.
   return (
     <>
-      <div className="profile-option-container">
-        <div className="profile-option-label-container">
-          <b>Provider</b>
+      <div className="row mb-4 align-items-center ">
+        <div className="col-sm-3">
+          <div className="form-label">Provider</div>
         </div>
-        <div className="profile-option-control-container">GitHub</div>
+        <div className="col-sm-9">GitHub</div>
       </div>
 
       <div
-        className={`profile-option-container ${repoError ? "has-error" : ""}`}
+        className={`row mb-4 align-items-center ${repoError ? "has-error" : ""}`}
       >
-        <div className="profile-option-label-container">
-          <label htmlFor="repo">Repository</label>
+        <div className="col-sm-12 col-xl-3">
+          <label htmlFor="repo" className="form-label">Repository</label>
         </div>
-        <div className="profile-option-control-container">
+        <div className="col-sm-12 col-xl-9">
           <input
+            className="form-control"
             id="repo"
             type="text"
             ref={repoFieldRef}
@@ -212,11 +228,11 @@ export function ImageBuilder({ name, isActive }) {
         }
         onChange={() => {}} // Hack to prevent a console error, while at the same time allowing for this field to be validatable, ie. not making it read-only
       />
-      <div className="profile-option-container">
-        <div className="profile-option-label-container">
-          <b>Build Logs</b>
+      <div className="row mb-4 align-items-center">
+        <div className="col-sm-12 col-xl-3">
+          <div className="form-label">Build Logs</div>
         </div>
-        <div className="profile-option-control-container">
+        <div className="col-sm-12 col-xl-9">
           <ImageLogs setFitAddon={setFitAddon} setTerm={setTerm} name={name} />
           {customImageError && (
             <div className="profile-option-control-error">
diff --git a/src/components/form/fields.jsx b/src/components/form/fields.jsx
index 741db52..421b251 100644
--- a/src/components/form/fields.jsx
+++ b/src/components/form/fields.jsx
@@ -21,11 +21,11 @@ function validateField(value, validateConfig, touched) {
 
 function Field({ id, label, hint, children, error }) {
   return (
-    <div className={`profile-option-container ${error ? "has-error" : ""}`}>
-      <div className="profile-option-label-container">
-        <label htmlFor={id}>{label}</label>
+    <div className={`row mb-4 align-items-center ${error ? "has-error" : ""}`}>
+      <div className="col-sm-12 col-xl-3">
+        <label className="form-label" htmlFor={id}>{label}</label>
       </div>
-      <div className="profile-option-control-container">
+      <div className="col-sm-12 col-xl-9">
         {children}
         {error && <div className="profile-option-control-error">{error}</div>}
         {hint && <div className="profile-option-control-hint">{hint}</div>}
@@ -88,6 +88,7 @@ function _TextField(
   return (
     <Field id={id} label={label} hint={hint} error={touched && error}>
       <input
+        className="form-control"
         ref={ref}
         type="text"
         id={id}
diff --git a/src/form.css b/src/form.css
index e2239d3..119ee51 100644
--- a/src/form.css
+++ b/src/form.css
@@ -38,23 +38,6 @@
   margin: 0 !important;
 }
 
-.profile-option-container {
-  display: grid;
-  grid-template-columns: 10rem minmax(0, 1fr);
-  gap: 1rem;
-  margin-bottom: 2rem;
-  width: 100%;
-}
-
-.profile-option-label-container {
-  grid-column-start: 1;
-  align-self: center;
-}
-
-.profile-option-control-container {
-  grid-column-start: 2;
-}
-
 .selected-profile {
   background-color: #f8f8f8;
 }
@@ -70,6 +53,7 @@
   background-color: black;
   padding: 16px;
 }
+
 .profile-option-control-container input[type="text"] {
   width: 100%;
   /* 8px here, even though we only use 4px for .react-select-item-container.