diff --git a/components/filter/demo/filter.html b/components/filter/demo/filter.html
index 2cf808c5f74..e545ad37510 100644
--- a/components/filter/demo/filter.html
+++ b/components/filter/demo/filter.html
@@ -16,7 +16,7 @@
import './filter-load-more-demo.js';
diff --git a/components/table/demo/table.html b/components/table/demo/table.html
index 9e713b5aeb7..916476ce902 100644
--- a/components/table/demo/table.html
+++ b/components/table/demo/table.html
@@ -8,6 +8,9 @@
import '../../demo/demo-page.js';
import './table-test.js';
+
diff --git a/components/table/table-col-sort-button.js b/components/table/table-col-sort-button.js
index 755681cab56..69135530a5f 100644
--- a/components/table/table-col-sort-button.js
+++ b/components/table/table-col-sort-button.js
@@ -184,9 +184,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
${iconView}
${buttonDescription}${sortedView}`;
if (this._hasDropdownItems) {
- return html`
+ return html`
${button}
-
+
diff --git a/components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png
new file mode 100644
index 00000000000..b02a71227a5
Binary files /dev/null and b/components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png
new file mode 100644
index 00000000000..1af827940da
Binary files /dev/null and b/components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png
index eef36a35234..24ee81a234f 100644
Binary files a/components/table/test/golden/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png
index 51633beeae5..563b585bca3 100644
Binary files a/components/table/test/golden/table/chromium/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png
new file mode 100644
index 00000000000..4488c5f58fb
Binary files /dev/null and b/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png
new file mode 100644
index 00000000000..05a94e1e2a6
Binary files /dev/null and b/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png
index f8cc5ba1e81..91686e0bf1a 100644
Binary files a/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png
index 36bd884ac72..fa415f5db6d 100644
Binary files a/components/table/test/golden/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png
new file mode 100644
index 00000000000..8bd30445f71
Binary files /dev/null and b/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png
new file mode 100644
index 00000000000..28d3021676a
Binary files /dev/null and b/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png
index 639a748c77e..a9cccd81858 100644
Binary files a/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png
index d50950687f1..5fe709d850e 100644
Binary files a/components/table/test/golden/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png
index fd507dc815f..2983d030c77 100644
Binary files a/components/table/test/golden/table/chromium/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png
new file mode 100644
index 00000000000..ffb6cbeb552
Binary files /dev/null and b/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png
new file mode 100644
index 00000000000..7e664db0761
Binary files /dev/null and b/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png
index 106a4429972..4d0aa4329eb 100644
Binary files a/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/golden/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png b/components/table/test/golden/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png
index 8629d69fe87..746a804163a 100644
Binary files a/components/table/test/golden/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png and b/components/table/test/golden/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png differ
diff --git a/components/table/test/table.vdiff.js b/components/table/test/table.vdiff.js
index 516701aea06..a67b5b31cf8 100644
--- a/components/table/test/table.vdiff.js
+++ b/components/table/test/table.vdiff.js
@@ -664,6 +664,26 @@ describe('table', () => {
await expect(elem).to.be.golden();
});
+ it('col-sort-button-dropdown-open-short-flag-off', async() => {
+ window.D2L = {};
+ const elem = await createTableFixture(html`
+ ${createSortableButtonDropdownHeaderRow()}
+ ${createRows([1])}
+ `);
+ await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+ await expect(elem).to.be.golden();
+ });
+
+ it('col-sort-button-dropdown-open-short-flag-on', async() => {
+ window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+ const elem = await createTableFixture(html`
+ ${createSortableButtonDropdownHeaderRow()}
+ ${createRows([1])}
+ `);
+ await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+ await expect(elem).to.be.golden({ margin: 50 });
+ });
+
it('wrapper component', async() => {
const elem = await fixture(html``, { rtl });
await expect(elem).to.be.golden();