web: Adjust padding and margins

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 {

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);

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;

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 {

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;

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 {

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;
 }