From a681a57b4fa2ab9dcfaad2ae8e389b4875bb12f1 Mon Sep 17 00:00:00 2001
From: karenmai-usace <karen.w.mai@usace.army.mil>
Date: Tue, 25 Aug 2026 16:10:09 -0700
Subject: [PATCH 1/2] Added verticalAlign: "top" to all columns of Version
 History table

---
 src/components/TableVersionHistory.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/TableVersionHistory.js b/src/components/TableVersionHistory.js
index e878ce446..f9f01471b 100644
--- a/src/components/TableVersionHistory.js
+++ b/src/components/TableVersionHistory.js
@@ -1,7 +1,6 @@
-import React from "react";
 import Link from "@docusaurus/Link";
-import useBaseUrl from "@docusaurus/useBaseUrl";
 import { useLocation } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 import "../css/custom.css";
 import "../css/tables.css";
 
@@ -42,7 +41,7 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod
         <thead>
           <tr>
             {HEADERS.map((h, i) => (
-              <th key={h} className="table-header border" style={{ textAlign: HEADERS_ALIGN[i] }}>
+              <th key={h} className="border table-header" style={{ textAlign: HEADERS_ALIGN[i] }}>
                 {h}
               </th>
             ))}
@@ -62,11 +61,11 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod
             return (
               <tr key={rowIndex}>
                 {/* Version (col 0) */}
-                <td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "center" }} title={v}>
+                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={v}>
                   {versionHref ? (
                     <Link
                       to={useBaseUrl(versionHref)}
-                      className="text-ifm-link hover:text-ifm-link-hover no-underline hover:underline"
+                      className="no-underline text-ifm-link hover:text-ifm-link-hover hover:underline"
                     >
                       {v}
                     </Link>
@@ -76,13 +75,13 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod
                 </td>
 
                 {/* Date (col 1) */}
-                <td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={d}>
+                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={d}>
                   {d}
                 </td>
 
                 {/* Description (col 2) */}
                 <td
-                  className="table-body-cell border"
+                  className="border table-body-cell"
                   style={{
                     textAlign: "left",
                     verticalAlign: "top",
@@ -94,7 +93,7 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod
                 >
                   {Array.isArray(ds) ? (
                     ds.length > 1 ? (
-                      <ul className="list-disc pl-5 m-0">
+                      <ul className="pl-5 m-0 list-disc">
                         {ds.map((item, i) => (
                           <li key={i}>{item}</li>
                         ))}
@@ -108,17 +107,17 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod
                 </td>
 
                 {/* Modified By (col 3) */}
-                <td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={m}>
+                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={m}>
                   {m}
                 </td>
 
                 {/* Reviewed By (col 4) */}
-                <td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={r}>
+                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={r}>
                   {r}
                 </td>
 
                 {/* Approved By (col 5) */}
-                <td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={a}>
+                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={a}>
                   {a}
                 </td>
               </tr>

From be870f720de6c4da1761a76769c7794e0e08bb96 Mon Sep 17 00:00:00 2001
From: Adam Gohs <adam.c.gohs@usace.army.mil>
Date: Wed, 26 Aug 2026 13:24:05 -0400
Subject: [PATCH 2/2] Update TableVersionHistory.js

Aligned all header columns to the left and created a global CELL style for the TableVersionHistory component and assigned it to all table columns. This replaces the individual style={{ textAlign: 'left', verticalAlign: 'top' }} entries for each column and standardizes the formatting.
---
 src/components/TableVersionHistory.js | 197 +++++++++++++-------------
 1 file changed, 97 insertions(+), 100 deletions(-)

diff --git a/src/components/TableVersionHistory.js b/src/components/TableVersionHistory.js
index f9f01471b..cf473a59c 100644
--- a/src/components/TableVersionHistory.js
+++ b/src/components/TableVersionHistory.js
@@ -1,28 +1,29 @@
-import Link from "@docusaurus/Link";
-import { useLocation } from "@docusaurus/router";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import "../css/custom.css";
-import "../css/tables.css";
+import Link from '@docusaurus/Link';
+import { useLocation } from '@docusaurus/router';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import '../css/custom.css';
+import '../css/tables.css';
 
 const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], modifiedBy = [], reviewedBy = [], approvedBy = [] }) => {
   const rowCount = Math.max(versions.length, dates.length, descriptions.length, modifiedBy.length, reviewedBy.length, approvedBy.length);
   const location = useLocation();
-  const pathname = location?.pathname || "";
+  const pathname = location?.pathname || '';
   const docMatch = pathname.match(/\/docs\/(.+?)\/v\d+\.\d+\//);
-  const documentPath = docMatch ? docMatch[1] : "";
+  const documentPath = docMatch ? docMatch[1] : '';
 
   // Hard-coded headers, widths, and alignments
-  const HEADERS = ["Version", "Date", "Description", "Modified By", "Reviewed By", "Approved By"];
-  const COL_WIDTHS = ["8%", "13%", "37%", "14%", "14%", "14%"];
-  const HEADERS_ALIGN = ["center", "left", "left", "left", "left", "left"];
+  const HEADERS = ['Version', 'Date', 'Description', 'Modified By', 'Reviewed By', 'Approved By'];
+  const COL_WIDTHS = ['8%', '13%', '37%', '14%', '14%', '14%'];
+  const HEADERS_ALIGN = ['left', 'left', 'left', 'left', 'left', 'left'];
+  const CELL = { textAlign: 'left', verticalAlign: 'top' };
 
-  const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? "";
+  const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? '';
   const normalizeVersion = (value) => {
-    if (!value) return "";
-    return value.startsWith("v") ? value : `v${value}`;
+    if (!value) return '';
+    return value.startsWith('v') ? value : `v${value}`;
   };
   const buildVersionHistoryHref = (value) => {
-    if (!documentPath || !value) return "";
+    if (!documentPath || !value) return '';
     const version = normalizeVersion(value);
     return `/docs/${documentPath}/${version}/version-history`;
   };
@@ -30,101 +31,97 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod
   return (
     <div className="table-container">
       <div className="table-scroller">
-      <table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: "fixed", "--table-min-width": "720px" }}>
-        {/* Column sizing */}
-        <colgroup>
-          {COL_WIDTHS.map((w, i) => (
-            <col key={i} style={{ width: w }} />
-          ))}
-        </colgroup>
-
-        <thead>
-          <tr>
-            {HEADERS.map((h, i) => (
-              <th key={h} className="border table-header" style={{ textAlign: HEADERS_ALIGN[i] }}>
-                {h}
-              </th>
+        <table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: 'fixed', '--table-min-width': '720px' }}>
+          {/* Column sizing */}
+          <colgroup>
+            {COL_WIDTHS.map((w, i) => (
+              <col key={i} style={{ width: w }} />
             ))}
-          </tr>
-        </thead>
+          </colgroup>
+
+          <thead>
+            <tr>
+              {HEADERS.map((h, i) => (
+                <th key={h} className="table-header border" style={{ textAlign: HEADERS_ALIGN[i] }}>
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
 
-        <tbody>
-          {Array.from({ length: rowCount }).map((_, rowIndex) => {
-            const v = get(versions, rowIndex);
-            const d = get(dates, rowIndex);
-            const ds = get(descriptions, rowIndex);
-            const m = get(modifiedBy, rowIndex);
-            const r = get(reviewedBy, rowIndex);
-            const a = get(approvedBy, rowIndex);
-            const versionHref = buildVersionHistoryHref(v);
+          <tbody>
+            {Array.from({ length: rowCount }).map((_, rowIndex) => {
+              const v = get(versions, rowIndex);
+              const d = get(dates, rowIndex);
+              const ds = get(descriptions, rowIndex);
+              const m = get(modifiedBy, rowIndex);
+              const r = get(reviewedBy, rowIndex);
+              const a = get(approvedBy, rowIndex);
+              const versionHref = buildVersionHistoryHref(v);
 
-            return (
-              <tr key={rowIndex}>
-                {/* Version (col 0) */}
-                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={v}>
-                  {versionHref ? (
-                    <Link
-                      to={useBaseUrl(versionHref)}
-                      className="no-underline text-ifm-link hover:text-ifm-link-hover hover:underline"
-                    >
-                      {v}
-                    </Link>
-                  ) : (
-                    v
-                  )}
-                </td>
+              return (
+                <tr key={rowIndex}>
+                  {/* Version (col 0) */}
+                  <td className="table-body-cell table-cell-nowrap border" style={CELL} title={v}>
+                    {versionHref ? (
+                      <Link to={useBaseUrl(versionHref)} className="text-ifm-link no-underline hover:text-ifm-link-hover hover:underline">
+                        {v}
+                      </Link>
+                    ) : (
+                      v
+                    )}
+                  </td>
 
-                {/* Date (col 1) */}
-                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={d}>
-                  {d}
-                </td>
+                  {/* Date (col 1) */}
+                  <td className="table-body-cell table-cell-nowrap border" style={CELL} title={d}>
+                    {d}
+                  </td>
 
-                {/* Description (col 2) */}
-                <td
-                  className="border table-body-cell"
-                  style={{
-                    textAlign: "left",
-                    verticalAlign: "top",
-                    whiteSpace: "normal",
-                    overflowWrap: "anywhere",
-                    wordBreak: "break-word",
-                    hyphens: "auto",
-                  }}
-                >
-                  {Array.isArray(ds) ? (
-                    ds.length > 1 ? (
-                      <ul className="pl-5 m-0 list-disc">
-                        {ds.map((item, i) => (
-                          <li key={i}>{item}</li>
-                        ))}
-                      </ul>
+                  {/* Description (col 2) */}
+                  <td
+                    className="table-body-cell border"
+                    style={{
+                      ...CELL,
+                      whiteSpace: 'normal',
+                      overflowWrap: 'anywhere',
+                      wordBreak: 'break-word',
+                      hyphens: 'auto',
+                    }}
+                  >
+                    {Array.isArray(ds) ? (
+                      ds.length > 1 ? (
+                        <ul className="m-0 list-disc pl-5">
+                          {ds.map((item, i) => (
+                            <li key={i}>{item}</li>
+                          ))}
+                        </ul>
+                      ) : (
+                        ds[0] || ''
+                      )
                     ) : (
-                      ds[0] || ""
-                    )
-                  ) : (
-                    ds
-                  )}
-                </td>
+                      ds
+                    )}
+                  </td>
 
-                {/* Modified By (col 3) */}
-                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={m}>
-                  {m}
-                </td>
+                  {/* Modified By (col 3) */}
+                  <td className="table-body-cell table-cell-nowrap border" style={CELL} title={m}>
+                    {m}
+                  </td>
 
-                {/* Reviewed By (col 4) */}
-                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={r}>
-                  {r}
-                </td>
+                  {/* Reviewed By (col 4) */}
+                  <td className="table-body-cell table-cell-nowrap border" style={CELL} title={r}>
+                    {r}
+                  </td>
 
-                {/* Approved By (col 5) */}
-                <td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={a}>
-                  {a}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                  {/* Approved By (col 5) */}
+                  <td className="table-body-cell table-cell-nowrap border" style={CELL} title={a}>
+                    {a}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </div>
     </div>
   );