diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css
index 7072753701..b72103c5cd 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css
@@ -24,6 +24,8 @@
     outline: solid #CCCCCC 2px;
     flex-direction: column;
     width: 433px;
+    max-width: calc(100vw - 20px);
+    box-sizing: border-box;
 }
 
 .datetimepicker .dp-clear {
@@ -112,7 +114,8 @@
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     color: #666666;
-    min-width:40px;
+    min-width: 40px;
+    flex: 0 0 calc(100% / 7);
 }
 
 .datetimepicker .view ul.header li {
@@ -165,4 +168,39 @@
 
 .datefieldwidget.widgetreadonly .cmp-adaptiveform-datepicker__calendar-icon {
     display: none;
+}
+
+/* Responsive styles for WCAG 1.4.10 Reflow compliance at 320px */
+@media (max-width: 400px) {
+    .datetimepicker {
+        width: calc(100vw - 20px);
+        left: 10px !important;
+        right: 10px !important;
+    }
+
+    .datetimepicker .view ul {
+        padding: 2px;
+    }
+
+    .datetimepicker .view ul li {
+        min-width: 30px;
+        padding: 3px 1px;
+        font-size: 0.75rem;
+        flex: 0 0 calc(100% / 7);
+    }
+
+    .datetimepicker .dp-header .dp-caption {
+        flex: 1;
+        font-size: 0.875rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .datetimepicker .dp-header .dp-leftnav,
+    .datetimepicker .dp-header .dp-rightnav {
+        min-width: 35px;
+        width: 35px;
+        flex-shrink: 0;
+    }
 }
\ No newline at end of file
diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js
index ba57542199..17ab8ef88d 100644
--- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js
+++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js
@@ -361,4 +361,133 @@ describe("Form Runtime layout of Date Picker ", () => {
         });
     });
 
+    describe("Reflow at 320px width (WCAG 1.4.10)", () => {
+        
+        it("should display all date picker controls at 320px viewport width", () => {
+            cy.viewport(320, 568);
+            
+            const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0];
+
+            cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon")
+                .should("be.visible")
+                .click();
+            
+            cy.get('.datetimepicker.datePickerTarget')
+                .should("be.visible")
+                .and("have.css", "display", "flex");
+            
+            cy.get(".dp-leftnav")
+                .should("be.visible")
+                .and("be.visible");
+            
+            cy.get(".dp-rightnav")
+                .should("be.visible")
+                .and("be.visible");
+            
+            cy.get(".dp-caption")
+                .should("be.visible");
+        });
+
+        it("should display all days in the first column (Sunday) at 320px", () => {
+            cy.viewport(320, 568);
+            
+            const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0];
+            const date = '2026-02-01';
+            
+            cy.get(`#${datePicker}`).find("input").clear().type(date);
+            
+            cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon")
+                .should("be.visible")
+                .click();
+            
+            cy.get('.datetimepicker.datePickerTarget').within(() => {
+                cy.get('ul.header li').first().should("be.visible").and("contain", "Sun");
+                
+                cy.get("#li-day-2").should("be.visible");
+                cy.get("#li-day-9").should("be.visible");
+                cy.get("#li-day-16").should("be.visible");
+                cy.get("#li-day-23").should("be.visible"); 
+            });
+        });
+
+        it("should allow navigation with previous/next buttons at 320px", () => {
+            cy.viewport(320, 568);
+            
+            const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0];
+            const date = '2025-03-01';
+            
+            cy.get(`#${datePicker}`).find("input").clear().type(date);
+            
+            cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon")
+                .should("be.visible")
+                .click();
+            
+            cy.get(".dp-caption").should("contain", "March");
+            cy.get(".dp-leftnav").should("be.visible").click();
+            cy.get(".dp-caption").should("contain", "February");
+            cy.get(".dp-rightnav").should("be.visible").click();
+            cy.get(".dp-caption").should("contain", "March");
+        });
+
+        it("should not cause horizontal overflow at 320px", () => {
+            cy.viewport(320, 568);
+            
+            const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0];
+            
+            cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon")
+                .should("be.visible")
+                .click();
+            
+            cy.get('.datetimepicker.datePickerTarget').then(($picker) => {
+                const pickerWidth = $picker.outerWidth();
+                expect(pickerWidth).to.be.lessThan(320);
+            });
+            
+            cy.document().then((doc) => {
+                expect(doc.documentElement.scrollWidth).to.equal(doc.documentElement.clientWidth);
+            });
+        });
+
+        it("should maintain date column alignment at 320px", () => {
+            cy.viewport(320, 568);
+            
+            const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0];
+            const date = '2025-03-01'; 
+            
+            cy.get(`#${datePicker}`).find("input").clear().type(date);
+
+            cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon")
+                .should("be.visible")
+                .click();
+            
+            cy.get('.datetimepicker.datePickerTarget .view.dp-monthview ul:not(.header)').then(($rows) => {
+                const firstCellWidth = $rows.eq(0).find('li').eq(0).outerWidth();
+                
+                $rows.each((rowIndex, row) => {
+                    cy.wrap(row).find('li').each((cellIndex, cell) => {
+                        const cellWidth = Cypress.$(cell).outerWidth();
+                        expect(Math.abs(cellWidth - firstCellWidth)).to.be.lessThan(2);
+                    });
+                });
+            });
+        });
+
+        it("should allow date selection at 320px viewport", () => {
+            cy.viewport(320, 568);
+            
+            const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0];
+            const date = '2025-03-01';
+            
+            cy.get(`#${datePicker}`).find("input").clear().type(date);
+            
+            cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon")
+                .should("be.visible")
+                .click();
+            
+            cy.get("#li-day-10").should("be.visible").click();
+            
+            cy.get(`#${datePicker}`).find("input").blur().should("have.value", "Sunday, 2 March, 2025");
+        });
+    });
+
 })
\ No newline at end of file