fix pagination styling

Author: nbeatty-gpa

Source/Applications/SystemCenterNotification/Scripts/TSX/EmailTypes/History.tsx

@@ -42,7 +42,7 @@ const History = (props: IProps) => {
     const [selectedEmailLabel, setSelectedEmailLabel] = React.useState<string | null>(null);
 
     const steps: IStep[] = React.useMemo(() => {
-        if ((selectedEmailLabel?.length ?? 0) == 0) 
+        if ((selectedEmailLabel?.length ?? 0) == 0)
             return []
         return [
             { Label: 'History', ID: "history", IsNavigable: true },
@@ -65,38 +65,32 @@ const History = (props: IProps) => {
 
     return (
         <>
-            <div className="container-fluid d-flex h-100 flex-column" style={{ height: 'inherit' }}>
-                <div className="row" style={{ flex: 1, overflow: 'hidden' }}>
-                    <div className="card" style={{ width: '100%', height: '100%' }}>
-                        <div className="card-header">
-                            <div className="row">
-                                {selectedEmailID == null ? < div className="col-6 align-self-center">
-                                    <h2>Email History:</h2>
-                                </div> :
-                                    <div className="col">
-                                        <Breadcrumb
-                                            Steps={steps}
-                                            CurrentStep={currentStep}
-                                            OnClick={resetToHistory}
-                                        />
-                                    </div>}
-                            </div>
-                        </div>
-                        <div className="card-body" style={{ paddingTop: 10, paddingBottom: 0, overflow: 'hidden' }}>
-                            <div className="container-fluid d-flex h-100 flex-column" style={{ padding: 0 }}>
-                                {selectedEmailID == null ?
-                                    <SentEmailTable
-                                        EmailTypeID={props.Record?.ID}
-                                        OnClick={handleOnHistoryTableClick}
-                                    /> :
-                                    <SentEmailTimeline
-                                        SentEmailID={selectedEmailID}
-                                    />
-                                }
-                            </div>
-                        </div>
+            <div className="card d-flex flex-column flex-grow-1" style={{ width: '100%', height: '100%' , overflow: 'hidden'}}>
+                <div className="card-header">
+                    <div className="row">
+                        {selectedEmailID == null ? < div className="col-6 align-self-center">
+                            <h2>Email History:</h2>
+                        </div> :
+                            <div className="col">
+                                <Breadcrumb
+                                    Steps={steps}
+                                    CurrentStep={currentStep}
+                                    OnClick={resetToHistory}
+                                />
+                            </div>}
                     </div>
                 </div>
+                <div className="card-body d-flex flex-column h-100" style={{ paddingTop: 10, paddingBottom: 0, overflow: 'hidden' }}>
+                    {selectedEmailID == null ?
+                        <SentEmailTable
+                            EmailTypeID={props.Record?.ID}
+                            OnClick={handleOnHistoryTableClick}
+                        /> :
+                        <SentEmailTimeline
+                            SentEmailID={selectedEmailID}
+                        />
+                    }
+                </div>
             </div>
         </>
     )

Source/Applications/SystemCenterNotification/Scripts/TSX/EmailTypes/SentEmailTable.tsx

@@ -1,7 +1,7 @@
 //******************************************************************************************************
 //  SentEmailTable.tsx - Gbtc
 //
-//  Copyright © 2026, Grid Protection Alliance.  All Rights Reserved.
+//  Copyright © 2026, Grid Protection Alliance.  All Rights Reserved.
 //
 //  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
 //  the NOTICE file distributed with this work for additional information regarding copyright ownership.
@@ -60,8 +60,8 @@ const SentEmailTable = (props: IProps) => {
     return (
         <>
             <LoadingScreen Show={pageStatus == 'loading'} />
-            <div className="row flex-grow-1" style={{overflow: 'hidden'}}>
-                <div className="col h-100 d-flex flex-column" style={{ overflow: 'hidden' }}>
+            <div className="row" style={{ overflow: 'hidden', flex: '1 1 0%' }}>
+                <div className="col h-100" style={{ overflow: 'hidden' }}>
                     <Table<SentEmail>
                         TableClass="table table-hover"
                         Data={data}
@@ -71,13 +71,6 @@ const SentEmailTable = (props: IProps) => {
                             if (d.colKey === sortKey) setAscending(a => !a);
                             else setSortKey(d.colField);
                         }}
-                        TableStyle={{
-                            padding: 0, width: 'calc(100%)', height: 'calc(100% - 16px)',
-                            tableLayout: 'fixed', overflow: 'hidden', display: 'flex', flexDirection: 'column'
-                        }}
-                        TheadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
-                        TbodyStyle={{ display: 'block', overflowY: 'scroll', flex: 1 }}
-                        RowStyle={{ display: 'table', tableLayout: 'fixed', width: '100%' }}
                         Selected={(item) => false}
                         KeySelector={(item) => item.ID}
                         OnClick={(data) => props.OnClick(data.row)}