From af7cb92282a870cb62526a8601a29973e6c5c991 Mon Sep 17 00:00:00 2001
From: "Alinson S. Xavier" <git@axavier.org>
Date: Tue, 9 Sep 2025 11:10:04 -0500
Subject: [PATCH] web: Adjust padding and margins

---
 web/src/components/CaseBuilder/Header.module.css       |  2 +-
 .../Common/Buttons/SiteHeaderButton.module.css         |  2 +-
 web/src/components/Common/Forms/DataTable.tsx          |  7 +++++--
 web/src/components/Common/Forms/Form.module.css        | 10 +++++++---
 web/src/components/Common/Forms/Form.tsx               |  6 +++++-
 web/src/components/Common/Forms/Tables.css             |  8 ++++++--
 .../Common/SectionHeader/SectionHeader.module.css      |  3 ++-
 7 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/web/src/components/CaseBuilder/Header.module.css b/web/src/components/CaseBuilder/Header.module.css
index 5131e12..ba4c98e 100644
--- a/web/src/components/CaseBuilder/Header.module.css
+++ b/web/src/components/CaseBuilder/Header.module.css
@@ -25,7 +25,7 @@ h2 {
   line-height: 48px;
   font-size: 28px;
   margin: 0;
-  padding: 12px;
+  padding: 12px 24px;
 }
 
 .HeaderContent h2 {
diff --git a/web/src/components/Common/Buttons/SiteHeaderButton.module.css b/web/src/components/Common/Buttons/SiteHeaderButton.module.css
index 8c5ef54..bc7048c 100644
--- a/web/src/components/Common/Buttons/SiteHeaderButton.module.css
+++ b/web/src/components/Common/Buttons/SiteHeaderButton.module.css
@@ -5,7 +5,7 @@
  */
 
 .SiteHeaderButton {
-  padding: 6px 36px;
+  padding: 6px 24px;
   margin: 0 0 0 8px;
   line-height: 24px;
   border: var(--box-border);
diff --git a/web/src/components/Common/Forms/DataTable.tsx b/web/src/components/Common/Forms/DataTable.tsx
index fd64d96..9ff8cb9 100644
--- a/web/src/components/Common/Forms/DataTable.tsx
+++ b/web/src/components/Common/Forms/DataTable.tsx
@@ -14,7 +14,6 @@ import { ValidationError } from "../../../core/Data/validate";
 import Papa from "papaparse";
 import { parseBool, parseNumber } from "../../../core/Operations/commonOps";
 import { UnitCommitmentScenario } from "../../../core/Data/types";
-import { tab } from "@testing-library/user-event/dist/tab";
 
 export interface ColumnSpec {
   title: string;
@@ -477,7 +476,11 @@ const DataTable = (props: DataTableProps) => {
     }
   }, [props, isTableBuilt]);
 
-  return <div className="tableContainer" ref={tableContainerRef} />;
+  return (
+    <div className="tableWrapper">
+      <div ref={tableContainerRef} />
+    </div>
+  );
 };
 
 export default DataTable;
diff --git a/web/src/components/Common/Forms/Form.module.css b/web/src/components/Common/Forms/Form.module.css
index f23421e..05b945a 100644
--- a/web/src/components/Common/Forms/Form.module.css
+++ b/web/src/components/Common/Forms/Form.module.css
@@ -4,17 +4,21 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
+.FormWrapper {
+    margin: 0 auto;
+    max-width: var(--site-max-width);
+}
+
 .Form {
   background-color: var(--contrast-0);
   border: var(--box-border);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   min-height: 48px;
-  margin: 0 auto;
+    margin: 0 12px;
   min-width: var(--site-min-width);
-  max-width: var(--site-max-width);
   max-height: 500px;
-  padding: 12px 0;
+  padding: 12px;
 }
 
 .FormRow {
diff --git a/web/src/components/Common/Forms/Form.tsx b/web/src/components/Common/Forms/Form.tsx
index 0b45a3e..e07bb8b 100644
--- a/web/src/components/Common/Forms/Form.tsx
+++ b/web/src/components/Common/Forms/Form.tsx
@@ -8,7 +8,11 @@ import { ReactNode } from "react";
 import styles from "./Form.module.css";
 
 function Form({ children }: { children: ReactNode }) {
-  return <div className={styles.Form}>{children}</div>;
+  return (
+    <div className={styles.FormWrapper}>
+      <div className={styles.Form}>{children}</div>
+    </div>
+  );
 }
 
 export default Form;
diff --git a/web/src/components/Common/Forms/Tables.css b/web/src/components/Common/Forms/Tables.css
index 002b2c8..4209dec 100644
--- a/web/src/components/Common/Forms/Tables.css
+++ b/web/src/components/Common/Forms/Tables.css
@@ -4,16 +4,20 @@
  * Released under the modified BSD license. See COPYING.md for more details.
  */
 
+.tableWrapper {
+  margin: 0 auto;
+  max-width: var(--site-max-width);
+}
+
 .tabulator {
   background-color: var(--contrast-0);
   border: var(--box-border) !important;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   min-height: 48px;
-  margin: 0 auto;
   min-width: var(--site-min-width);
-  max-width: var(--site-max-width);
   padding: 0;
+  margin: 0 12px;
 }
 
 .tabulator .tabulator-header {
diff --git a/web/src/components/Common/SectionHeader/SectionHeader.module.css b/web/src/components/Common/SectionHeader/SectionHeader.module.css
index f6db351..6241a70 100644
--- a/web/src/components/Common/SectionHeader/SectionHeader.module.css
+++ b/web/src/components/Common/SectionHeader/SectionHeader.module.css
@@ -13,7 +13,7 @@
 
 .SectionHeader h1 {
   margin: 0;
-  padding: 0 12px;
+  padding: 0 24px;
   font-size: 16px;
   line-height: 64px;
 }
@@ -21,4 +21,5 @@
 .SectionButtonsContainer {
   float: right;
   height: 64px;
+  margin-right: 12px;
 }