fix: resolve multiple UI issues in demo application

- Fix #78: Apply consistent middle alignment to all grid cells
  - Added display: flex and align-items: center to .ag-cell
  - Ensured custom renderers respect vertical alignment

- Fix #76: Address AG Grid footer issues
  - Modified StatusRenderer and PriorityRenderer to return null in footer/total rows
  - This prevents empty pill outlines from rendering in grand total row

- Fix #80: Remove NPM button from demo header
  - Removed NPM button, keeping only GitHub button
  - Header layout remains clean and functional

All fixes maintain existing functionality without introducing regressions.

Author: ryanrozich

src/demo/components-showcase-complete.tsx

@@ -67,18 +67,6 @@ const Navigation: React.FC<{
         </div>
         <div className="flex items-center gap-4">
           <VersionInfo className="hidden md:block" />
-          <a
-            href="https://www.npmjs.com/package/ag-grid-react-components"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
-          >
-            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 256 256">
-              <path d="M0 256V0h256v256z" />
-              <path d="M128 128v128h128V0H128z" fill="#C12127" />
-            </svg>
-            NPM
-          </a>
           <a
             href="https://github.com/ryanrozich/ag-grid-react-components"
             target="_blank"

src/demo/config/sharedGridConfig.tsx

@@ -34,7 +34,12 @@ export const darkTheme = themeQuartz.withParams({
 });
 
 // Status chip renderer
-export const StatusRenderer: React.FC<ICellRendererParams> = ({ value }) => {
+export const StatusRenderer: React.FC<ICellRendererParams> = ({ value, node }) => {
+  // Don't render anything in footer/total rows
+  if (node?.footer || node?.aggData) {
+    return null;
+  }
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case "Backlog":
@@ -68,7 +73,12 @@ export const StatusRenderer: React.FC<ICellRendererParams> = ({ value }) => {
 };
 
 // Priority chip renderer
-export const PriorityRenderer: React.FC<ICellRendererParams> = ({ value }) => {
+export const PriorityRenderer: React.FC<ICellRendererParams> = ({ value, node }) => {
+  // Don't render anything in footer/total rows
+  if (node?.footer || node?.aggData) {
+    return null;
+  }
+
   const getPriorityColor = (priority: string) => {
     switch (priority) {
       case "Critical":

src/demo/styles/showcase-dark.css

@@ -200,6 +200,8 @@ font-family:
 
 .ag-theme-quartz-dark .ag-cell {
   line-height: var(--ag-row-height);
+  display: flex;
+  align-items: center;
 }
 
 /* Numeric cells styling */
@@ -395,6 +397,14 @@ font-family:
   border-radius: 4px;
 }
 
+/* Ensure custom cell renderers respect alignment */
+.ag-theme-quartz-dark .ag-cell .pill-renderer,
+.ag-theme-quartz-dark .ag-cell .avatar-renderer {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
 /* Custom scrollbar */
 .ag-theme-quartz-dark ::-webkit-scrollbar {
   width: 10px;

src/demo/version-info.json

@@ -1,12 +1,12 @@
 {
   "version": "0.2.0-rc1",
   "git": {
-    "commitHash": "b1ba6bf2f6c13897f70b4bceb9bf94a459525d5e",
-    "shortHash": "b1ba6bf",
-    "branch": "fix/e2e-test-selectors",
-    "commitDate": "2025-07-09 18:27:31 -0500",
+    "commitHash": "c6a2b7440d5a36f779178c92e13a5b5cbe16c7bd",
+    "shortHash": "c6a2b74",
+    "branch": "fix/bundled-ui-fixes",
+    "commitDate": "2025-07-09 23:21:14 -0500",
     "latestTag": "v0.1.1-rc1",
-    "commitsSinceTag": 31,
+    "commitsSinceTag": 34,
     "isDirty": true
   },
   "deployment": {
@@ -15,7 +15,7 @@
     "isMainBranch": false,
     "deployPath": "ag-grid-react-components"
   },
-  "buildTime": "2025-07-10T02:55:14.965Z",
-  "displayVersion": "v0.2.0-rc1+31",
-  "displayLabel": "fix/e2e-test-selectors"
+  "buildTime": "2025-07-10T04:51:20.271Z",
+  "displayVersion": "v0.2.0-rc1+34",
+  "displayLabel": "fix/bundled-ui-fixes"
 }