Move DateField, DateTimeField, TimeField comment buttons to be right next to the fields. Fix #9543 (#9549)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -30,6 +30,7 @@ Changelog
  * Fix: Use consistent heading styles on top-level fields in the page editor (Sage Abdullah)
  * Fix: Allow button labels to wrap onto two lines in dropdown buttons (Coen van der Kamp)
  * Fix: Allow both horizontal and vertical manual resizing of TextFields (Anisha Singh)
+ * Fix: Move DateField, DateTimeField, TimeField comment buttons to be right next to the fields (Theresa Okoro)
  * Docs: Add custom permissions section to permissions documentation page (Dan Hayden)
  * Docs: Add documentation for how to get started with contributing translations for the Wagtail admin (Ogunbanjo Oluwadamilare)
  * Docs: Officially recommend `fnm` over `nvm` in development documentation (LB (Ben) Johnston)
@@ -67,6 +68,7 @@ Changelog
  * Fix: Use consistent heading styles on top-level fields in the page editor (Sage Abdullah)
  * Fix: Allow button labels to wrap onto two lines in dropdown buttons (Coen van der Kamp)
  * Fix: Allow both horizontal and vertical manual resizing of TextFields (Anisha Singh)
+ * Fix: Move DateField, DateTimeField, TimeField comment buttons to be right next to the fields (Theresa Okoro)
 
 
 4.1.1 (11.11.2022)

client/scss/components/forms/_field-comment-control.scss

@@ -47,6 +47,14 @@
     transform: translateY(0);
     top: 0.3125rem;
   }
+
+  .w-field--date_field &,
+  .w-field--date_time_field &,
+  .w-field--time_field & {
+    position: relative;
+    transform: translateY(0);
+    top: 0.3125rem;
+  }
 }
 
 .w-field__comment-button--add {

docs/releases/4.1.2.md

@@ -18,3 +18,4 @@ depth: 1
  * Use consistent heading styles on top-level fields in the page editor (Sage Abdullah)
  * Allow button labels to wrap onto two lines in dropdown buttons (Coen van der Kamp)
  * Allow both horizontal and vertical manual resizing of TextFields (Anisha Singh)
+ * Move DateField, DateTimeField, TimeField comment buttons to be right next to the fields (Theresa Okoro)

docs/releases/4.2.md

@@ -42,6 +42,7 @@ depth: 1
  * Use consistent heading styles on top-level fields in the page editor (Sage Abdullah)
  * Allow button labels to wrap onto two lines in dropdown buttons (Coen van der Kamp)
  * Allow both horizontal and vertical manual resizing of TextFields (Anisha Singh)
+ * Move DateField, DateTimeField, TimeField comment buttons to be right next to the fields (Theresa Okoro)
 
 ### Documentation