From 9c867c439c962990d7a4a73cea164cff2a812853 Mon Sep 17 00:00:00 2001
From: Paul Crowder <paul.crowder@blackbaud.com>
Date: Thu, 23 May 2024 12:28:12 -0400
Subject: [PATCH] Make property definition table headers sticky (#287)

---
 CHANGELOG.md                                  |  4 ++
 projects/docs-tools/package.json              |  2 +-
 .../property-definitions.component.html       | 64 ++++++++++---------
 .../property-definitions.component.scss       | 10 ++-
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b80098..f66926d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 10.5.0 (2024-05-23)
+
+- Make property definition table headers sticky. [#287](https://github.com/blackbaud/skyux-docs-tools/pull/287)
+
 ## 10.4.0 (2024-05-23)
 
 - Update control panel radio groups to use heading text inputs. [#286](https://github.com/blackbaud/skyux-docs-tools/pull/286)
diff --git a/projects/docs-tools/package.json b/projects/docs-tools/package.json
index 96e0ac7..9da770b 100644
--- a/projects/docs-tools/package.json
+++ b/projects/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyux/docs-tools",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "peerDependencies": {
     "@angular/common": "^17.3.10",
     "@angular/core": "^17.3.10",
diff --git a/projects/docs-tools/src/modules/type-definitions/property-definitions.component.html b/projects/docs-tools/src/modules/type-definitions/property-definitions.component.html
index 0545d23..f474429 100644
--- a/projects/docs-tools/src/modules/type-definitions/property-definitions.component.html
+++ b/projects/docs-tools/src/modules/type-definitions/property-definitions.component.html
@@ -1,35 +1,39 @@
 <div *ngIf="properties" class="sky-docs-property-definitions">
   <table *ngIf="!isMobile; else mobileTemplate" class="sky-docs-table">
-    <tr class="sky-docs-table-row">
-      <th
-        class="sky-docs-table-column-header sky-docs-table-column-header-name"
-      >
-        {{ propertyType }}
-      </th>
-      <th
-        class="sky-docs-table-column-header sky-docs-table-column-header-description"
-      >
-        Description
-      </th>
-    </tr>
-    <tr *ngFor="let property of properties" class="sky-docs-table-row">
-      <td
-        class="sky-docs-table-cell sky-docs-property-definitions-table-cell-name"
-      >
-        <ng-template
-          [ngTemplateOutlet]="nameTemplate"
-          [ngTemplateOutletContext]="{ $implicit: property }"
-        ></ng-template>
-      </td>
-      <td
-        class="sky-docs-table-cell sky-docs-property-definitions-table-cell-description"
-      >
-        <ng-template
-          [ngTemplateOutlet]="descriptionTemplate"
-          [ngTemplateOutletContext]="{ $implicit: property }"
-        ></ng-template>
-      </td>
-    </tr>
+    <thead>
+      <tr class="sky-docs-table-row">
+        <th
+          class="sky-docs-table-column-header sky-docs-table-column-header-name"
+        >
+          {{ propertyType }}
+        </th>
+        <th
+          class="sky-docs-table-column-header sky-docs-table-column-header-description"
+        >
+          Description
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let property of properties" class="sky-docs-table-row">
+        <td
+          class="sky-docs-table-cell sky-docs-property-definitions-table-cell-name"
+        >
+          <ng-template
+            [ngTemplateOutlet]="nameTemplate"
+            [ngTemplateOutletContext]="{ $implicit: property }"
+          ></ng-template>
+        </td>
+        <td
+          class="sky-docs-table-cell sky-docs-property-definitions-table-cell-description"
+        >
+          <ng-template
+            [ngTemplateOutlet]="descriptionTemplate"
+            [ngTemplateOutletContext]="{ $implicit: property }"
+          ></ng-template>
+        </td>
+      </tr>
+    </tbody>
   </table>
 
   <ng-template #mobileTemplate>
diff --git a/projects/docs-tools/src/modules/type-definitions/property-definitions.component.scss b/projects/docs-tools/src/modules/type-definitions/property-definitions.component.scss
index 1647c7e..f896357 100644
--- a/projects/docs-tools/src/modules/type-definitions/property-definitions.component.scss
+++ b/projects/docs-tools/src/modules/type-definitions/property-definitions.component.scss
@@ -10,7 +10,15 @@
 .sky-docs-property-definitions {
   width: 100%;
   max-width: 100%;
-  overflow: auto;
+
+  th {
+    position: sticky;
+    top: var(--sky-viewport-top, 0);
+  }
+
+  &-table-cell-description {
+    word-break: break-word;
+  }
 }
 
 .sky-docs-table-column-header-name {