diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 3404444c5..7e2cd4b99 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -5,7 +5,6 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn } from "../../utils/utils";
-import { Card, CardContent } from "../ui/card";
 
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
@@ -14,23 +13,13 @@ const TableComponent = forwardRef<
   const dark = useDarkStore((state) => state.dark);
 
   return (
-    <div className="flex h-full flex-col">
-      <div
-        className={cn(
-          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-          "ag-theme-shadcn flex h-full flex-col",
-        )} // applying the grid theme
-      >
-        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
-          <CardContent>
-            <AgGridReact
-              overlayNoRowsTemplate="No data available"
-              ref={ref}
-              {...props}
-            />
-          </CardContent>
-        </Card>
-      </div>
+    <div
+      className={cn(
+        dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+        "ag-theme-shadcn flex h-full min-h-2 flex-col",
+      )} // applying the grid theme
+    >
+      <AgGridReact ref={ref} {...props} />
     </div>
   );
 });
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 2ca48050b..34df9786c 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -8,6 +8,7 @@ import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
+import { Card, CardContent } from "../../../../components/ui/card";
 import { deleteGlobalVariable } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
@@ -104,6 +105,7 @@ export default function GlobalVariablesPage() {
       field: "default_fields",
       flex: 1,
       editable: false,
+      resizable: false,
     },
   ]);
 
@@ -168,17 +170,24 @@ export default function GlobalVariablesPage() {
       </div>
 
       <div className="flex h-full w-full flex-col justify-between pb-8">
-        <TableComponent
-          onSelectionChanged={(event: SelectionChangedEvent) => {
-            setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
-          }}
-          rowSelection="multiple"
-          suppressRowClickSelection={true}
-          domLayout="autoHeight"
-          pagination={false}
-          columnDefs={colDefs}
-          rowData={rowData}
-        />
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
+            <TableComponent
+              overlayNoRowsTemplate="No data available"
+              onSelectionChanged={(event: SelectionChangedEvent) => {
+                setSelectedRows(
+                  event.api.getSelectedRows().map((row) => row.name),
+                );
+              }}
+              rowSelection="multiple"
+              suppressRowClickSelection={true}
+              domLayout="autoHeight"
+              pagination={true}
+              columnDefs={colDefs}
+              rowData={rowData}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );