AMBARI-10146. Implement config-section layout within a config tab - css changes (Richard Zang via srimanth)

ambari-web/app/styles/application.less

@@ -5552,7 +5552,30 @@ input[type="checkbox"].align-checkbox {
   }
 }
 
-.config-section, .config-sub-section {
-  width: 100%;
-  height: 100%;
-}
+.section-layout-container {
+  width: 104%; // fallback option
+  width: ~"calc(100% + 40px)";
+  .config-section-table {
+    width: 100%;
+    height: 100%;
+    border-spacing: 20px;
+    border-collapse: separate;
+    table-layout: fixed; // for width to be equally distributed
+    margin: 0 -20px;
+    .config-section {
+      padding: 10px;
+      border: 1px solid #aaa;
+      td:not(:first-of-type) {
+        border-left: 2px solid #ccc; // horizontal splitter
+        padding-left: 20px;
+      }
+      .config-subsection-table {
+        width: 100%;
+        height: 100%;
+        border-spacing: 5px;
+        border-collapse: separate;
+        table-layout: fixed;
+      }
+    }
+  }
+}

ambari-web/app/templates/common/configs/service_config_layout_tab.hbs

@@ -16,23 +16,25 @@
 * limitations under the License.
 }}
 
-<table class="config-section" border="1">
-  {{#each row in tab.sectionRows}}
-    <tr>
-      {{#each section in row}}
-      <td {{bindAttr colspan="section.columnSpan" rowspan="section.rowSpan"}}>
-        {{section.displayName}}
-          <table class="config-sub-section" border="1">
-            {{#each subRow in section.subsectionRows}}
-              <tr>
-                {{#each subsection in subRow}}
-                  <td>{{subsection.name}}</td>
-                {{/each}}
-              </tr>
-            {{/each}}
-          </table>
-      </td>
-      {{/each}}
-    </tr>
-  {{/each}}
-</table>
+<div class="section-layout-container">
+  <table class="config-section-table">
+    {{#each row in tab.sectionRows}}
+      <tr>
+        {{#each section in row}}
+          <td class="config-section" {{bindAttr colspan="section.columnSpan" rowspan="section.rowSpan"}}>
+            {{section.displayName}}
+            <table class="config-subsection-table">
+              {{#each subRow in section.subsectionRows}}
+                <tr>
+                  {{#each subsection in subRow}}
+                    <td class="config-subsection">{{subsection.name}}</td>
+                  {{/each}}
+                </tr>
+              {{/each}}
+            </table>
+          </td>
+        {{/each}}
+      </tr>
+    {{/each}}
+  </table>
+</div>