Merge pull request #1724 from adobe/ens83070/FORMS-18632

FORMS-18632: Info or functionality is unavailable at 320px width equivalent @sunnym @vavarshn

Author: CezarSTF

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;
+    }
 }

ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js

@@ -361,4 +361,22 @@ describe("Form Runtime layout of Date Picker ", () => {
         });
     });
 
+    it("should display navigation controls at 320px viewport", () => {
+        cy.viewport(320, 568);
+        const [datePicker] = Object.entries(formContainer._fields)[0];
+        
+        cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click();
+        cy.get(".dp-leftnav").should("be.visible");
+        cy.get(".dp-rightnav").should("be.visible");
+    });
+
+    it("should display first column dates at 320px", () => {
+        cy.viewport(320, 568);
+        const [datePicker] = Object.entries(formContainer._fields)[0];
+        
+        cy.get(`#${datePicker}`).find("input").clear().type('2026-02-01');
+        cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click();
+        cy.get("#li-day-2").should("be.visible");
+    });
+
 })