diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 6a9b80dfb..ab526699e 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -33,6 +33,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed spacing in `<wa-input>` when both clear and password toggle icons are present [issue:1325]
 - Fixed a bug in `<wa-radio-group>` and `<wa-radio>` where changing appearances dynamically would render incorrectly [issue:1178]
 - Fixed a bug in `<wa-input>` that prevented the value from changing when assigning non-string values to `value` [issue:1323]
+- Fixed a bug in `<wa-color-picker>` that prevent the picker from staying in the viewport
 
 ## 3.0.0-beta.4
 
diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts
index 12413922f..25b94b9ec 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -1327,6 +1327,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         distance="0"
         skidding="0"
         sync="width"
+        flip
+        flip-fallback-strategy="best-fit"
+        shift
+        shift-padding="10"
         aria-disabled=${this.disabled ? 'true' : 'false'}
         @wa-after-show=${this.handleAfterShow}
         @wa-after-hide=${this.handleAfterHide}