From 1e045964fa8069a2380413585d80175813da39b0 Mon Sep 17 00:00:00 2001
From: Balakrishnan Balasubramanian <git.user@balki.me>
Date: Wed, 5 Jul 2023 22:27:09 -0400
Subject: [PATCH] style update

---
 jsdev/index.html | 58 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/jsdev/index.html b/jsdev/index.html
index 354151a..e38d75f 100644
--- a/jsdev/index.html
+++ b/jsdev/index.html
@@ -66,44 +66,72 @@
             }
         </script>
         <style>
+            .outer {
+                display: flex;
+                justify-content: center;
+                background: grey;
+            }
+            .inner {
+                border: 1px solid;
+                background: white;
+                padding: 5px;
+                // flex: 1 0 0;
+                // max-width: 700px;
+            }
             .m41-box {
                 display: grid;
-                grid-template-columns: 1fr 2fr;
+                grid-template-columns: 1fr 3fr;
+                margin: 10px;
+                // background-color: lightblue;
             }
             #web-cfg-boxes {
-                display: grid;
-                grid-template-columns: 1fr ;
-                width: 1200px;
+                // display: grid;
+                // grid-template-columns: 1fr ;
+                width: 100%;
                 //justify-content: space-around;
                 // justify-content: flex-start;
                 // background-color: blue;
             }
+
+            .m41-box:nth-of-type(odd) {
+                background: lightblue;
+            }
+
+            .m41-box:nth-of-type(even) {
+                background: lightgrey;
+            }
+
             .m41-box-info {
                 display: grid;
-                grid-template-columns: 3fr 1fr 5fr;
-                align-items: stretch;
+                grid-template-columns: 4fr 2fr 5fr;
+                // align-items: stretch;
                 // justify-content: space-around;
+                // background-color: grey;
             }
             .button-group {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                align-items: stretch;
+                display: flex;
+                justify-content: center;
+                // grid-template-columns: 1fr 1fr 1fr;
+                // align-items: stretch;
                 // display: inline-flex;
             }
 
             .m41-box-rule:only-child div.button-group button{
-                display: none;
+                // display: none;
+                visibility: hidden;
             }
 
             .m41-box:only-child div div.button-group button{
-                display: none;
+                // display: none;
+                visibility: hidden;
             }
 
             .m41-box-rule {
-                display: grid;
-                grid-template-columns: 1fr 3fr 1fr 1fr;
+                display: flex;
+                // grid-template-columns: 1fr 3fr 1fr 1fr;
                 align-items: center;
                 justify-items: center;
+                // background-color: lightblue;
             }
             
         </style>
@@ -289,6 +317,8 @@
                 </div>
             </div>
         </template>
+        <div class="outer">
+            <div class="inner">
         <h1>Mail4one Web config</h1>
         <table border id="web-cfg-matches">
             <thead>
@@ -316,5 +346,7 @@
         <h3>After</h3>
         <pre id="after"></pre>
         <hr>
+            </div>
+        </div>
     </body>
 </html>