From ac30c39cf968da8545ec0d6567d0f837c51a7ca2 Mon Sep 17 00:00:00 2001
From: Florence Haudin <haudin.florence@gmail.com>
Date: Mon, 10 Mar 2025 20:31:49 +0100
Subject: [PATCH 1/2] Change the order of the DeviceInfoTable and
 LegoBuildSpecific components. Try to improve the responsiveness of the
 control panel interface.

---
 .../components/ColorSelector.tsx              |  10 +-
 .../components/FrankieComponent.tsx           |  10 +-
 .../components/MoveHubComponent.tsx           |  10 +-
 .../components/MoveHubPanel.tsx               |   8 +-
 src/movehub-extension/components/Vernie.tsx   |   2 +-
 .../components/VernieComponent.tsx            |  12 +-
 style/base.css                                | 180 +++++++++++++-----
 7 files changed, 161 insertions(+), 71 deletions(-)

diff --git a/src/movehub-extension/components/ColorSelector.tsx b/src/movehub-extension/components/ColorSelector.tsx
index af8fe51..fc3c9cd 100644
--- a/src/movehub-extension/components/ColorSelector.tsx
+++ b/src/movehub-extension/components/ColorSelector.tsx
@@ -61,12 +61,12 @@ export function ColorSelector({ device }: IMoveHubPanelProps) {
       <div className="led-color-main-container">
         <div className="led-color-text" style={{ display: 'flex' }}>
           <p style={{ margin: '8px 0px' }}>Current color</p>
-         {(selectedColor!=='lightblue') ? <ColoredCircleWithText color={selectedColor} text={selectedColor} /> : <ColoredCircleWithText color={selectedColor} text={'light blue'} />}
+          {(selectedColor !== 'lightblue') ? <ColoredCircleWithText color={selectedColor} text={''} /> : <ColoredCircleWithText color={selectedColor} text={''} />}
         </div>
-        <div className="color-selector-container">
+        <div className="led-color-selector-container">
           <select
-            className="color-selector"
-            id="color-selector"
+            className="led-color-selector"
+            id="led-color-selector"
             value={''}
             onChange={handleColorChange}
           >
@@ -75,7 +75,7 @@ export function ColorSelector({ device }: IMoveHubPanelProps) {
             </option>
             {colors.map(color => (
               <option key={color} value={color}>
-                {(color !=='lightblue') ? color : 'light blue'}
+                {(color !== 'lightblue') ? color : 'light blue'}
               </option>
             ))}
           </select>
diff --git a/src/movehub-extension/components/FrankieComponent.tsx b/src/movehub-extension/components/FrankieComponent.tsx
index d4e7d53..b2c85a3 100644
--- a/src/movehub-extension/components/FrankieComponent.tsx
+++ b/src/movehub-extension/components/FrankieComponent.tsx
@@ -6,8 +6,11 @@ import Frankie from './Frankie';
 export function FrankieComponent({ device }: IMoveHubPanelProps) {
   return (
     <>
-      <div className="vernie-control-grid-container">
-        <div className="vernie-control-grid-item-right">
+      <div className="lego-build-control-grid-container">
+        <div className="lego-build-control-grid-item-left">
+          <Frankie />
+        </div>
+        <div className="lego-build-control-grid-item-center">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
@@ -55,9 +58,6 @@ export function FrankieComponent({ device }: IMoveHubPanelProps) {
           />
           <ColorSelector device={device} />
         </div>
-        <div className="vernie-control-grid-item-right">
-          <Frankie />
-        </div>
       </div>
     </>
   );
diff --git a/src/movehub-extension/components/MoveHubComponent.tsx b/src/movehub-extension/components/MoveHubComponent.tsx
index 6937577..b4014e8 100644
--- a/src/movehub-extension/components/MoveHubComponent.tsx
+++ b/src/movehub-extension/components/MoveHubComponent.tsx
@@ -11,8 +11,11 @@ export interface IHubControlProps {
 export function MoveHubComponent({ device }: IMoveHubPanelProps) {
   return (
     <>
-      <div className="vernie-control-grid-container">
-        <div className="vernie-control-grid-item-left">
+      <div className="lego-build-control-grid-container">
+        <div className="lego-build-control-grid-item-left">
+          <MoveHub />
+        </div>
+        <div className="lego-build-control-grid-item-center">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
@@ -59,9 +62,6 @@ export function MoveHubComponent({ device }: IMoveHubPanelProps) {
           />
           <ColorSelector device={device} />
         </div>
-        <div className="vernie-control-grid-item-right">
-          <MoveHub />
-        </div>
       </div>
     </>
   );
diff --git a/src/movehub-extension/components/MoveHubPanel.tsx b/src/movehub-extension/components/MoveHubPanel.tsx
index 968770b..c5a8b54 100644
--- a/src/movehub-extension/components/MoveHubPanel.tsx
+++ b/src/movehub-extension/components/MoveHubPanel.tsx
@@ -15,19 +15,15 @@ export interface IHubControlProps {
 
 export function MoveHubInfos(props: { device: MoveHub }) {
   return (
-    <>
-      <div className="lego-movehub-infos-container">
-        <DeviceInfoTable moveHub={props.device} />
-      </div>
-    </>
+    <DeviceInfoTable moveHub={props.device} />
   );
 }
 
 export function MoveHubPanel({ device }: IMoveHubPanelProps) {
   return (
     <div>
-      <MoveHubInfos device={device} />
       <LegoBuildSpecific device={device} />
+      <MoveHubInfos device={device} />
     </div>
   );
 }
diff --git a/src/movehub-extension/components/Vernie.tsx b/src/movehub-extension/components/Vernie.tsx
index 2946f64..e307667 100644
--- a/src/movehub-extension/components/Vernie.tsx
+++ b/src/movehub-extension/components/Vernie.tsx
@@ -10,7 +10,7 @@ export default function Vernie () {
         justifyContent: 'center'
       }}
     >
-      <img src={VernieSVGUrl} alt="Vernie schematics" height="300px" />
+      <img src={VernieSVGUrl} alt="Vernie schematics" height="250px" />
     </div>
   );
 };
diff --git a/src/movehub-extension/components/VernieComponent.tsx b/src/movehub-extension/components/VernieComponent.tsx
index 6ac3c44..4a98f0b 100644
--- a/src/movehub-extension/components/VernieComponent.tsx
+++ b/src/movehub-extension/components/VernieComponent.tsx
@@ -8,7 +8,11 @@ export function VernieComponent({ device }: IMoveHubPanelProps) {
   return (
     <>
       <div className="vernie-control-grid-container">
+
         <div className="vernie-control-grid-item-left">
+          <Vernie />
+        </div>
+        <div className="vernie-control-grid-item-center">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
@@ -49,19 +53,17 @@ export function VernieComponent({ device }: IMoveHubPanelProps) {
             buttonText2={'Left'}
             type={'angle'}
             port={'D'}
-            caution="⚠ The angle for Port D should be in range: [0°, 110°]."
+            caution=""
             dutyCycleDirect={-100}
             dutyCycleIndirect={100}
           />
           <ColorSelector device={device} />
         </div>
-        <div className="vernie-control-grid-item-right">
-          <Vernie />
-        </div>
 
-        <div className="vernie-control-grid-item-left">
+        <div className="vernie-control-grid-item-right">
           <ManualControl moveHub={device} />
         </div>
+
       </div>
     </>
   );
diff --git a/style/base.css b/style/base.css
index 2745183..a9a7ca4 100644
--- a/style/base.css
+++ b/style/base.css
@@ -6,20 +6,17 @@
 
 .jp-movehub-panel-content {
   padding: 0 2em;
-  overflow: auto;
+  overflow-y: scroll;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.vernie-control-grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 4px;
-  justify-content: left;
+.vernie-control-grid-item-left {
+  justify-self: center;
   align-items: center;
-  margin-top: 50px;
-  gap: 16px;
 }
 
-.vernie-control-grid-item-left {
+.vernie-control-grid-item-center {
   justify-self: left;
   align-items: center;
 }
@@ -29,6 +26,16 @@
   align-items: center;
 }
 
+.lego-build-control-grid-item-left {
+  justify-self: center;
+  align-items: center;
+}
+
+.lego-build-control-grid-item-right {
+  justify-self: center;
+  align-items: center;
+}
+
 .move-form-main-container {
   display: flex;
   align-items: center;
@@ -88,13 +95,60 @@
   text-align: left;
 }
 
-.manual-control-text-container {
-  margin: 8px 0;
+.led-color-selector {
+  height: 24px;
+  padding: 0;
+  line-height: 18px;
+  border-radius: 4px;
+  border-color: black;
+  border-width: 0.5px;
+  margin-top: -12px;
+  position: absolute;
+  font-size: 11px;
+}
+
+.color-selector-container {
+  display: flex;
+  justify-content: right;
+  gap: 10px;
+}
+
+.lego-build-control-grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 4px;
   justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  gap: 16px;
   width: 100%;
 }
 
-@media (width< 1200px) {
+@media (max-width: 940px) { /*smaller screens*/
+  .vernie-control-grid-container {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(3, auto);
+    grid-gap: 4px;
+    justify-content: left;
+    align-items: center;
+    margin-top: 20px;
+    gap: 16px;
+    width: 100%;
+  }
+
+  .lego-build-control-grid-container {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(2, auto);
+    grid-gap: 4px;
+    justify-content: left;
+    align-items: center;
+    margin-top: 20px;
+    gap: 16px;
+    width: 100%;
+  }
+
   .move-input-field-text {
     width: 40%;
   }
@@ -108,17 +162,72 @@
   }
 
   .led-color-text {
-    width: 50%;
+    width: 40%;
+  }
+
+  .led-color-selector-container {
+    width: 60%;
+  }
+
+  .led-color-selector {
+    width: 171px;
+  }
+}
+
+@media (min-width: 940px) and (max-width: 1270px) { /* intermediary screens*/
+  .vernie-control-grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
+    grid-gap: 4px;
+    justify-content: left;
+    align-items: center;
+    margin-top: 20px;
+    gap: 16px;
+    width: 100%;
+  }
+
+  .move-input-field-text {
+    width: 150px;
+    text-align: left;
+  }
+
+  .move-input-field-with-1button {
+    width: 150px;
+  }
+
+  .move-input-field-with-2buttons {
+    width: 150px;
+  }
+
+  .led-color-text {
+    width: 150px;
+    text-align: left;
+  }
+
+  .led-color-selector-container {
+    width: 150px;
   }
 
-  .color-selector-container {
-    width: 50%;
+  .led-color-selector {
+    width: 150px;
   }
 }
 
-@media (width> 1200px) {
+@media (min-width: 1270px) { /* larger screens */
+  .vernie-control-grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 4px;
+    justify-content: left;
+    align-items: center;
+    margin-top: 20px;
+    gap: 16px;
+    width: 100%;
+  }
+
   .move-input-field-text {
-    width: 200px;
+    width: 150px;
     text-align: left;
   }
 
@@ -131,16 +240,16 @@
   }
 
   .led-color-text {
-    width: 200px;
+    width: 150px;
     text-align: left;
   }
 
-  .color-selector-container {
+  .led-color-selector-container {
     width: 150px;
   }
 
-  .color-selector {
-    width: 110px;
+  .led-color-selector {
+    width: 150px;
   }
 }
 
@@ -148,13 +257,13 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 0;
-  width: 144px;
-  height: 144px;
+  width: 210px;
+  height: 210px;
 }
 
 .manual-control-grid-item {
-  width: 48px;
-  height: 48px;
+  width: 70px;
+  height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,9 +296,10 @@
   border-width: 0.5px;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
-  table-layout: fixed;
   margin-top: 16px;
   margin-bottom: 16px;
+  width: 100%;
+  table-layout: auto;
 }
 
 .custom-table-thead {
@@ -226,21 +336,3 @@
   font-size: var(--jp-content-font-size1);
   line-height: var(--jp-content-line-height);
 }
-
-.color-selector {
-  height: 24px;
-  padding: 0;
-  line-height: 18px;
-  border-radius: 4px;
-  border-color: black;
-  border-width: 0.5px;
-  margin-top: -12px;
-  position: absolute;
-  font-size: 11px;
-}
-
-.color-selector-container {
-  display: flex;
-  justify-content: right;
-  gap: 10px;
-}

From 52b3a4a116ddfb573387de86f61fa8b71ecc6f54 Mon Sep 17 00:00:00 2001
From: Florence Haudin <haudin.florence@gmail.com>
Date: Tue, 11 Mar 2025 13:40:05 +0100
Subject: [PATCH 2/2] Keep on improving the responsivess and style of the
 control panel.

---
 src/movehub-extension/components/Frankie.tsx  |   2 +-
 .../components/FrankieComponent.tsx           |   2 +-
 .../components/MoveHubComponent.tsx           |   2 +-
 style/base.css                                | 171 +++++++-----------
 4 files changed, 67 insertions(+), 110 deletions(-)

diff --git a/src/movehub-extension/components/Frankie.tsx b/src/movehub-extension/components/Frankie.tsx
index bba0aa4..1dc7583 100644
--- a/src/movehub-extension/components/Frankie.tsx
+++ b/src/movehub-extension/components/Frankie.tsx
@@ -5,7 +5,7 @@ const FrankieSVGUrl = `data:image/svg+xml;base64,${btoa(FrankieSVG)}`;
 export default function Frankie () {
   return (
     <div>
-      <img src={FrankieSVGUrl} alt="Frankie schematics" height="200px" />
+      <img src={FrankieSVGUrl} alt="Frankie schematics" height="220px" />
     </div>
   );
 };
diff --git a/src/movehub-extension/components/FrankieComponent.tsx b/src/movehub-extension/components/FrankieComponent.tsx
index b2c85a3..bc19ce0 100644
--- a/src/movehub-extension/components/FrankieComponent.tsx
+++ b/src/movehub-extension/components/FrankieComponent.tsx
@@ -10,7 +10,7 @@ export function FrankieComponent({ device }: IMoveHubPanelProps) {
         <div className="lego-build-control-grid-item-left">
           <Frankie />
         </div>
-        <div className="lego-build-control-grid-item-center">
+        <div className="lego-build-control-grid-item-right">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
diff --git a/src/movehub-extension/components/MoveHubComponent.tsx b/src/movehub-extension/components/MoveHubComponent.tsx
index b4014e8..b162d71 100644
--- a/src/movehub-extension/components/MoveHubComponent.tsx
+++ b/src/movehub-extension/components/MoveHubComponent.tsx
@@ -15,7 +15,7 @@ export function MoveHubComponent({ device }: IMoveHubPanelProps) {
         <div className="lego-build-control-grid-item-left">
           <MoveHub />
         </div>
-        <div className="lego-build-control-grid-item-center">
+        <div className="lego-build-control-grid-item-right">
           <h4
             style={{
               color: 'var(--jp-accept-color-normal)',
diff --git a/style/base.css b/style/base.css
index a9a7ca4..23fff0a 100644
--- a/style/base.css
+++ b/style/base.css
@@ -11,13 +11,35 @@
   box-sizing: border-box;
 }
 
+.vernie-control-grid-container {
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: repeat(3, 1fr);
+  justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  gap: 16px;
+  width: 100%;
+}
+
+.lego-build-control-grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 4px;
+  justify-content: left;
+  align-items: center;
+  margin-top: 20px;
+  gap: 16px;
+  width: 100%;
+}
+
 .vernie-control-grid-item-left {
   justify-self: center;
   align-items: center;
 }
 
 .vernie-control-grid-item-center {
-  justify-self: left;
+  justify-self: center;
   align-items: center;
 }
 
@@ -47,6 +69,7 @@
 
 .move-input-field-text {
   text-align: left;
+  width: 150px;
 }
 
 .move-input-field {
@@ -58,15 +81,8 @@
   font-size: 10px;
 }
 
-.move-input-field-with-1button {
-  width: 60%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 .move-input-field-with-2buttons {
-  width: 60%;
+  width: 150px;
   display: flex;
   gap: 10px;
 }
@@ -91,8 +107,13 @@
   margin-bottom: 8px;
 }
 
+.led-color-selector-container {
+  width: 150px;
+}
+
 .led-color-text {
   text-align: left;
+  width: 150px;
 }
 
 .led-color-selector {
@@ -105,6 +126,7 @@
   margin-top: -12px;
   position: absolute;
   font-size: 11px;
+  width: 150px;
 }
 
 .color-selector-container {
@@ -113,143 +135,78 @@
   gap: 10px;
 }
 
-.lego-build-control-grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 4px;
-  justify-content: left;
-  align-items: center;
-  margin-top: 20px;
-  gap: 16px;
-  width: 100%;
-}
-
-@media (max-width: 940px) { /*smaller screens*/
-  .vernie-control-grid-container {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: repeat(3, auto);
-    grid-gap: 4px;
-    justify-content: left;
-    align-items: center;
-    margin-top: 20px;
-    gap: 16px;
-    width: 100%;
-  }
-
-  .lego-build-control-grid-container {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-template-rows: repeat(2, auto);
-    grid-gap: 4px;
-    justify-content: left;
-    align-items: center;
-    margin-top: 20px;
-    gap: 16px;
-    width: 100%;
-  }
-
+@media (max-width: 450px) { /*smaller screens*/
   .move-input-field-text {
-    width: 40%;
-  }
-
-  .move-input-field-with-1button {
-    width: 60%;
+    width: 100px;
   }
 
   .move-input-field-with-2buttons {
-    width: 60%;
-  }
-
-  .led-color-text {
-    width: 40%;
+    gap: 5px;
   }
 
-  .led-color-selector-container {
-    width: 60%;
+  .move-validation-button {
+    width: 50px;
   }
 
-  .led-color-selector {
-    width: 171px;
+  .move-input-field {
+    width: 20px;
   }
-}
 
-@media (min-width: 940px) and (max-width: 1270px) { /* intermediary screens*/
   .vernie-control-grid-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-    grid-gap: 4px;
-    justify-content: left;
-    align-items: center;
-    margin-top: 20px;
-    gap: 16px;
-    width: 100%;
-  }
-
-  .move-input-field-text {
-    width: 150px;
-    text-align: left;
-  }
-
-  .move-input-field-with-1button {
-    width: 150px;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(3, auto);
   }
 
-  .move-input-field-with-2buttons {
-    width: 150px;
+  .lego-build-control-grid-container {
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(2, auto);
   }
 
   .led-color-text {
-    width: 150px;
-    text-align: left;
-  }
-
-  .led-color-selector-container {
-    width: 150px;
+    width: 100px;
   }
 
   .led-color-selector {
-    width: 150px;
+    width: 130px;
   }
 }
 
-@media (min-width: 1270px) { /* larger screens */
+@media (min-width: 451px) and (max-width: 940px) { /*small screens*/
   .vernie-control-grid-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 4px;
-    justify-content: left;
-    align-items: center;
-    margin-top: 20px;
-    gap: 16px;
-    width: 100%;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(3, auto);
   }
 
-  .move-input-field-text {
-    width: 150px;
-    text-align: left;
+  .lego-build-control-grid-container {
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(2, auto);
   }
 
-  .move-input-field-with-1button {
-    width: 150px;
+  .move-input-field-text {
+    width: 40%;
   }
 
   .move-input-field-with-2buttons {
-    width: 150px;
+    width: 60%;
   }
 
   .led-color-text {
-    width: 150px;
-    text-align: left;
+    width: 40%;
   }
 
   .led-color-selector-container {
-    width: 150px;
+    width: 60%;
   }
 
   .led-color-selector {
-    width: 150px;
+    width: 171px;
+  }
+}
+
+@media (min-width: 941px) and (max-width: 1270px) { /* intermediary screens*/
+  .vernie-control-grid-container {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
   }
 }