Add support for horizontal layout

ssewell · Sep 14, 2023 · 02e94fc · 02e94fc
1 parent 53d1954
commit 02e94fc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/Printer.tsx b/src/components/Printer.tsx
@@ -21,7 +21,7 @@ export default function Printer({
   const hasProgress = status.TotalLayer > 0;
 
   return (
-    <>
+    <div className="printer-container">
       <div className="printer-item">
         <div>
           <PrinterIcon machineName={attr.MachineName} />
@@ -52,6 +52,6 @@ export default function Printer({
         </div>
       </div>
       {debug && <pre>{JSON.stringify(item, null, 2)}</pre>}
-    </>
+    </div>
   );
 }
diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -15,7 +15,19 @@ body {
   justify-content: center;
 }
 
+.App {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.6em;
+}
+
 /* 3D Printer Layout */
+.printer-container {
+  display: flex;
+  flex-direction: column;
+}
+
 .printer-item {
   background: rgb(51, 51, 51);
   background: linear-gradient(
@@ -27,8 +39,10 @@ body {
   padding: 30px;
   border-radius: 10px;
   display: flex;
+  flex-grow: 1;
   height: 300px;
-  width: 600px;
+  min-width: 600px;
+  max-width: 600px;
 }
 
 .printer-header {