fix(revisions): layout on mobile

apps/client/src/stylesheets/style.css

@@ -1170,6 +1170,31 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     min-height: 0;
 }
 
+.modal-content-with-sidebar .modal-sidebar-header {
+    padding: 0.75rem 1rem;
+    flex-shrink: 0;
+    text-align: center;
+    border-bottom: 1px solid var(--main-border-color);
+}
+
+.modal-content-with-sidebar .modal-sidebar-header h5 {
+    margin: 0;
+    font-size: 1em;
+}
+
+.modal-content-with-sidebar > .modal-main > .modal-header > .modal-title {
+    visibility: hidden;
+    flex-grow: 1;
+    width: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.modal-content-with-sidebar > .modal-main > .modal-header {
+    flex-wrap: nowrap;
+}
+
 .modal-content-with-sidebar > .modal-main {
     display: flex;
     flex-direction: column;
@@ -1185,6 +1210,32 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     min-height: 0;
 }
 
+body.mobile .modal-content-with-sidebar {
+    flex-direction: column !important;
+}
+
+body.mobile .modal-content-with-sidebar > .modal-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--main-border-color);
+    height: 30vh;
+    flex-shrink: 0;
+    overflow: hidden;
+    order: 1;
+}
+
+body.mobile .modal-content-with-sidebar > .modal-main {
+    order: 0;
+}
+
+body.mobile .modal-content-with-sidebar .modal-sidebar-header {
+    display: none;
+}
+
+body.mobile .modal-content-with-sidebar > .modal-main > .modal-header > .modal-title {
+    visibility: visible;
+    width: auto;
+}
+
 .ck-mentions .ck-button {
     font-size: var(--detail-font-size) !important;
     padding: 5px;

apps/client/src/widgets/dialogs/revisions.css

@@ -3,61 +3,20 @@ body.mobile .revisions-dialog {
         height: 95vh;
     }
 
-    .modal-header {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.25em;
-        font-size: 0.9em;
-    }
-
-    .modal-title {
-        flex-grow: 1;
-        width: 100%;
-    }
-
-    .modal-body {
-        height: fit-content !important;
-        flex-direction: column;
-    }
-
     .modal-footer {
         font-size: 0.9em;
     }
 
-    .revision-list {
-        height: fit-content !important;
-        max-height: 20vh;
-        border-bottom: 1px solid var(--main-border-color) !important;
-        padding: 0 1em;
-        flex-shrink: 0;
-    }
-
-    .modal-body > .revision-content-wrapper {
-        flex-grow: 1;
-        max-width: unset !important;
-        height: 100%;
-        margin: 0;
-        display: block !important;
-    }
-
-    .modal-body > .revision-content-wrapper > div:first-of-type {
-        flex-direction: column;
-    }
-
     .revision-title {
         font-size: 1rem;
     }
 
-    .revision-title-buttons {
-        text-align: center;
-        display: flex;
-        gap: 0.25em;
+    .revision-toolbar-actions {
         flex-wrap: wrap;
     }
 
     .revision-content {
         padding: 0.5em;
-        height: fit-content;
     }
 }
 
@@ -65,6 +24,10 @@ body.desktop .revisions-dialog {
     .revision-list {
         width: 300px;
     }
+
+    .modal-content {
+        height: 80vh;
+    }
 }
 
 .revisions-dialog {
@@ -83,18 +46,6 @@ body.desktop .revisions-dialog {
         border-radius: 0 !important;
     }
 
-    .revision-sidebar-header {
-        padding: 0.75rem 1rem;
-        flex-shrink: 0;
-        text-align: center;
-        border-bottom: 1px solid var(--main-border-color);
-
-        h5 {
-            margin: 0;
-            font-size: 1em;
-        }
-    }
-
     .revision-toolbar {
         flex-shrink: 0;
         border-bottom: 1px solid var(--main-border-color);
@@ -119,10 +70,6 @@ body.desktop .revisions-dialog {
         opacity: 0.6;
     }
 
-    .modal-content {
-        height: 80vh;
-    }
-
     .revision-content-wrapper {
         flex-grow: 1;
         display: flex;

apps/client/src/widgets/dialogs/revisions.tsx

@@ -65,7 +65,7 @@ export default function RevisionsDialog() {
         <Modal
             className="revisions-dialog"
             size="xl"
-            title=""
+            title={t("revisions.note_revisions")}
             helpPageId="vZWERwf8U3nx"
             header={note && (
                 <RevisionsMenu
@@ -82,21 +82,16 @@ export default function RevisionsDialog() {
                 />
             )}
             sidebar={
-                <>
-                    <div className="revision-sidebar-header">
-                        <h5>{t("revisions.note_revisions")}</h5>
-                    </div>
-                    <RevisionsList
-                        revisions={revisions ?? []}
-                        onSelect={(revisionId) => {
-                            const correspondingRevision = (revisions ?? []).find((r) => r.revisionId === revisionId);
-                            if (correspondingRevision) {
-                                setCurrentRevision(correspondingRevision);
-                            }
-                        }}
-                        currentRevision={currentRevision}
-                    />
-                </>
+                <RevisionsList
+                    revisions={revisions ?? []}
+                    onSelect={(revisionId) => {
+                        const correspondingRevision = (revisions ?? []).find((r) => r.revisionId === revisionId);
+                        if (correspondingRevision) {
+                            setCurrentRevision(correspondingRevision);
+                        }
+                    }}
+                    currentRevision={currentRevision}
+                />
             }
             onHidden={() => {
                 setShown(false);

apps/client/src/widgets/react/Modal.tsx

@@ -151,7 +151,12 @@ export default function Modal({ children, className, size, title, customTitleBar
         <div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
             {(show || keepInDom) && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
                 <div className={clsx("modal-content", sidebar && "modal-content-with-sidebar")}>
-                    {sidebar && <div className="modal-sidebar">{sidebar}</div>}
+                    {sidebar && <div className="modal-sidebar">
+                        {title && <div className="modal-sidebar-header">
+                            <h5>{typeof title === "string" ? title : title}</h5>
+                        </div>}
+                        {sidebar}
+                    </div>}
                     <div className="modal-main">
                         <div className="modal-header">
                             {!title || typeof title === "string" ? (