fix: set correct margin on the overlay content toolbar part (#9365)

Author: web-padawan

packages/date-picker/test/visual/lumo/date-picker.test.js

@@ -124,6 +124,13 @@ describe('date-picker', () => {
           await openOverlay();
           await visualDiff(div, `${dir}-week-numbers`);
         });
+
+        it('fullscreen', async () => {
+          element.value = '2000-01-01';
+          element._fullscreen = true;
+          await openOverlay();
+          await visualDiff(element._overlayContent, `${dir}-fullscreen`);
+        });
       });
     });
   });

packages/date-picker/test/visual/lumo/screenshots/date-picker/baseline/ltr-fullscreen.png

@@ -95,6 +95,7 @@ registerStyles(
 
     :host([fullscreen]) [part='toolbar'] {
       background-color: var(--lumo-base-color);
+      margin-inline-end: 57px;
     }
 
     :host([fullscreen]) [part='overlay-header'] {
@@ -129,9 +130,8 @@ registerStyles(
         background-image: none;
       }
 
-      [part='toolbar'],
-      ::slotted([slot='months']) {
-        margin-right: 0;
+      :host([fullscreen]) [part='toolbar'] {
+        margin-inline-end: 0;
       }
 
       /* TODO make date-picker adapt to the width of the years part */

packages/date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-fullscreen.png

@@ -119,6 +119,7 @@
 
 :host([fullscreen]) [part='toolbar'] {
   grid-area: header;
+  margin-inline-end: 57px;
 }
 
 [part='toolbar'] ::slotted(vaadin-button) {
@@ -181,9 +182,8 @@
     background-image: none;
   }
 
-  [part='toolbar'],
-  ::slotted([slot='months']) {
-    margin-right: 0;
+  :host([fullscreen]) [part='toolbar'] {
+    margin-inline-end: 0;
   }
 
   /* TODO make date-picker adapt to the width of the years part */