Fix big date separators when jump to date is enabled (#10404)

Fix https://github.com/vector-im/element-web/issues/22969

res/css/views/messages/_DateSeparator.pcss

@@ -30,9 +30,13 @@ limitations under the License.
     border-bottom: 1px solid $menu-selected-color;
 }
 
-.mx_DateSeparator > h2 {
+.mx_DateSeparator_dateContent {
-    margin: 0 25px;
+    padding: 0 25px;
+}
+
+.mx_DateSeparator_dateHeading {
     flex: 0 0 auto;
+    margin: 0;
     font-size: inherit;
     font-weight: inherit;
     color: inherit;

src/components/views/messages/DateSeparator.tsx

@@ -206,12 +206,14 @@ export default class DateSeparator extends React.Component<IProps, IState> {
 
         return (
             <ContextMenuTooltipButton
-                className="mx_DateSeparator_jumpToDateMenu"
+                className="mx_DateSeparator_jumpToDateMenu mx_DateSeparator_dateContent"
                 onClick={this.onContextMenuOpenClick}
                 isExpanded={!!this.state.contextMenuPosition}
                 title={_t("Jump to date")}
             >
-                <h2 aria-hidden="true">{this.getLabel()}</h2>
+                <h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
+                    {this.getLabel()}
+                </h2>
                 <div className="mx_DateSeparator_chevron" />
                 {contextMenu}
             </ContextMenuTooltipButton>
@@ -225,7 +227,13 @@ export default class DateSeparator extends React.Component<IProps, IState> {
         if (this.state.jumpToDateEnabled) {
             dateHeaderContent = this.renderJumpToDateMenu();
         } else {
-            dateHeaderContent = <h2 aria-hidden="true">{label}</h2>;
+            dateHeaderContent = (
+                <div className="mx_DateSeparator_dateContent">
+                    <h2 className="mx_DateSeparator_dateHeading" aria-hidden="true">
+                        {label}
+                    </h2>
+                </div>
+            );
         }
 
         // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one

test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -53,11 +53,16 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                 <hr
                   role="none"
                 />
-                <h2
+                <div
-                  aria-hidden="true"
+                  class="mx_DateSeparator_dateContent"
                 >
-                  Thu, Jan 1 1970
+                  <h2
-                </h2>
+                    aria-hidden="true"
+                    class="mx_DateSeparator_dateHeading"
+                  >
+                    Thu, Jan 1 1970
+                  </h2>
+                </div>
                 <hr
                   role="none"
                 />
@@ -165,11 +170,16 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                 <hr
                   role="none"
                 />
-                <h2
+                <div
-                  aria-hidden="true"
+                  class="mx_DateSeparator_dateContent"
                 >
-                  ,  NaN NaN
+                  <h2
-                </h2>
+                    aria-hidden="true"
+                    class="mx_DateSeparator_dateHeading"
+                  >
+                    ,  NaN NaN
+                  </h2>
+                </div>
                 <hr
                   role="none"
                 />

test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap

@@ -11,11 +11,16 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
     <hr
       role="none"
     />
-    <h2
+    <div
-      aria-hidden="true"
+      class="mx_DateSeparator_dateContent"
     >
-      Today
+      <h2
-    </h2>
+        aria-hidden="true"
+        class="mx_DateSeparator_dateHeading"
+      >
+        Today
+      </h2>
+    </div>
     <hr
       role="none"
     />
@@ -38,12 +43,13 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
       aria-expanded="false"
       aria-haspopup="true"
       aria-label="Jump to date"
-      class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
+      class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu mx_DateSeparator_dateContent"
       role="button"
       tabindex="0"
     >
       <h2
         aria-hidden="true"
+        class="mx_DateSeparator_dateHeading"
       >
         Fri, Dec 17 2021
       </h2>