diff --git a/express/code/libs/color-components/components/color-swatch-rail/index.js b/express/code/libs/color-components/components/color-swatch-rail/index.js
index 50cc0cae2..d80ddafa2 100644
--- a/express/code/libs/color-components/components/color-swatch-rail/index.js
+++ b/express/code/libs/color-components/components/color-swatch-rail/index.js
@@ -1324,7 +1324,7 @@ export class ColorSwatchRail extends LitElement {
       const stackedContent = html`
         <div class="bottom-info bottom-info--stacked" part="bottom-info">
           ${showEdit ? html`<input type="color" id="edit-input-${index}" class="edit-input-native" tabindex="-1" aria-hidden="true" value=${swatch.hex} @input=${(ev) => this._onNativePickerChange(index, ev)} @change=${() => this._markNativePickerClosedSoon(50)} @blur=${() => this._markNativePickerClosedSoon(50)} />` : ''}
-          ${f.hexCode ? ((showEdit || f.copyFromHex) ? html`<button type="button" class="hex-code hex-code--${showEdit ? 'editable' : 'copyable'} swatch-column-focusable" tabindex="-1" @click=${showEdit ? (ev) => this._handleColorPicker(index, ev.currentTarget) : (ev) => this._handleCopy(swatch.hex, ev.currentTarget)} aria-label=${showEdit ? 'Edit color' : 'Copy hex'} title=${showEdit ? 'Edit color' : 'Copy hex'}>${swatch.hex}</button>` : html`<span class="hex-code hex-code--static">${swatch.hex}</span>`) : ''}
+          ${f.hexCode ? ((showEdit || f.copyFromHex) ? html`<button type="button" class="hex-code hex-code--${showEdit ? 'editable' : 'copyable'} swatch-column-focusable${this._activeEditIndex === index ? ' hex-code--editor-open' : ''}" tabindex="-1" @click=${showEdit ? (ev) => this._handleColorPicker(index, ev.currentTarget) : (ev) => this._handleCopy(swatch.hex, ev.currentTarget)} aria-label=${showEdit ? 'Edit color' : 'Copy hex'} title=${showEdit ? 'Edit color' : 'Copy hex'}>${swatch.hex}</button>` : html`<span class="hex-code hex-code--static">${swatch.hex}</span>`) : ''}
         </div>
         ${stackedIcons}
       `;
diff --git a/express/code/libs/color-components/components/color-swatch-rail/styles.css.js b/express/code/libs/color-components/components/color-swatch-rail/styles.css.js
index 001f49b27..971108d7c 100644
--- a/express/code/libs/color-components/components/color-swatch-rail/styles.css.js
+++ b/express/code/libs/color-components/components/color-swatch-rail/styles.css.js
@@ -1021,11 +1021,17 @@ export const style = css`
     height: 32px;
     border-radius: var(--Corner-radius-corner-radius-100);
   }
-  .swatch-column[data-contrast="dark"] button.hex-code:hover,
+  @media (hover: hover) {
+    .swatch-column[data-contrast="dark"] button.hex-code:hover {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+    .swatch-column[data-contrast="light"] button.hex-code:hover {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
+  }
   .swatch-column[data-contrast="dark"] button.hex-code.hex-code--editor-open {
     background-color: rgba(255, 255, 255, 0.12);
   }
-  .swatch-column[data-contrast="light"] button.hex-code:hover,
   .swatch-column[data-contrast="light"] button.hex-code.hex-code--editor-open {
     background-color: rgba(0, 0, 0, 0.12);
   }
@@ -1063,11 +1069,13 @@ export const style = css`
   
 
   
-  .swatch-column[data-contrast="dark"] .icon-button:hover {
-    background-color: rgba(255, 255, 255, 0.12);
-  }
-  .swatch-column[data-contrast="light"] .icon-button:hover {
-    background-color: rgba(0, 0, 0, 0.12);
+  @media (hover: hover) {
+    .swatch-column[data-contrast="dark"] .icon-button:hover {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+    .swatch-column[data-contrast="light"] .icon-button:hover {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
   }
 
   
diff --git a/express/code/scripts/color-shared/renderers/createStripContainerRenderer.js b/express/code/scripts/color-shared/renderers/createStripContainerRenderer.js
index 30b7d98a9..9e9e6e4b6 100644
--- a/express/code/scripts/color-shared/renderers/createStripContainerRenderer.js
+++ b/express/code/scripts/color-shared/renderers/createStripContainerRenderer.js
@@ -576,15 +576,29 @@ export function createStripContainerRenderer(options) {
     return anchorElement.getBoundingClientRect();
   }
 
+  function getStickyHeaderBottom() {
+    const selectors = ['header.global-navigation', '.feds-localnav'];
+    return selectors.reduce((max, sel) => {
+      const el = document.querySelector(sel);
+      if (!el) return max;
+      return Math.max(max, el.getBoundingClientRect().bottom);
+    }, 0);
+  }
+
   function positionPopover(popover, anchorRect, container) {
     const gap = 4;
     const popRect = popover.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
 
-    let viewportTop = anchorRect.bottom + gap;
-    if (viewportTop + popRect.height > window.innerHeight) {
-      viewportTop = anchorRect.top - popRect.height - gap;
-    }
+    const belowTop = anchorRect.bottom + gap;
+    const aboveTop = anchorRect.top - popRect.height - gap;
+    const headerBottom = getStickyHeaderBottom();
+
+    const fitsBelow = belowTop + popRect.height <= window.innerHeight;
+    const fitsAbove = aboveTop >= headerBottom;
+
+    let viewportTop = belowTop;
+    if (!fitsBelow && fitsAbove) viewportTop = aboveTop;
 
     let viewportLeft = anchorRect.left;
     if (viewportLeft + popRect.width > window.innerWidth - gap) {