From 5ff77c16abca59a5a65fd8d38ba366c8240ac4a4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 30 Nov 2025 21:13:07 +0200
Subject: [PATCH] feat(revisions): improve layout on mobile

---
 apps/client/src/widgets/dialogs/revisions.css | 22 ++++++++++++++++++-
 apps/client/src/widgets/dialogs/revisions.tsx |  2 +-
 apps/client/src/widgets/react/FormList.tsx    |  6 +++--
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/revisions.css b/apps/client/src/widgets/dialogs/revisions.css
index 91c3af11c..5528ac368 100644
--- a/apps/client/src/widgets/dialogs/revisions.css
+++ b/apps/client/src/widgets/dialogs/revisions.css
@@ -2,15 +2,31 @@ body.mobile .revisions-dialog {
     .modal-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: 100% !important;
         flex-direction: column;
         padding: 0;
     }
+
+    .modal-footer {
+        font-size: 0.9em;
+    }
     
     .revision-list {
-        height: unset;
+        height: fit-content !important;
         max-height: 20vh;
         border-bottom: 1px solid var(--main-border-color) !important;
         padding: 0 1em;
@@ -18,6 +34,7 @@ body.mobile .revisions-dialog {
     
     .modal-body > .revision-content-wrapper {
         flex-grow: 1;
+        max-width: unset !important;
         height: 100%;
         overflow: auto;
         margin: 0;
@@ -33,6 +50,9 @@ body.mobile .revisions-dialog {
     
     .revision-title-buttons {
         text-align: center;
+        display: flex;
+        gap: 0.25em;
+        flex-wrap: wrap;
     }
     
     .revision-content {
diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx
index fd2dd9a16..322abdd3b 100644
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -138,7 +138,7 @@ export default function RevisionsDialog() {
 
 function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) {
     return (
-        <FormList onSelect={onSelect} fullHeight>
+        <FormList onSelect={onSelect} fullHeight wrapperClassName="revision-list">
             {revisions.map((item) =>
                 <FormListItem
                     value={item.revisionId}
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index ca5fcf66e..5faab055f 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -6,15 +6,17 @@ import "./FormList.css";
 import { CommandNames } from "../../components/app_context";
 import { useStaticTooltip } from "./hooks";
 import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
+import clsx from "clsx";
 
 interface FormListOpts {
     children: ComponentChildren;
     onSelect?: (value: string) => void;
     style?: CSSProperties;
+    wrapperClassName?: string;
     fullHeight?: boolean;
 }
 
-export default function FormList({ children, onSelect, style, fullHeight }: FormListOpts) {
+export default function FormList({ children, onSelect, style, fullHeight, wrapperClassName }: FormListOpts) {
     const wrapperRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -43,7 +45,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
     }, [ fullHeight ]);
 
     return (
-        <div className="dropdownWrapper" ref={wrapperRef} style={builtinStyles}>
+        <div className={clsx("dropdownWrapper", wrapperClassName)} ref={wrapperRef} style={builtinStyles}>
             <div className="dropdown" style={builtinStyles}>
                 <button
                     ref={triggerRef}