responsive highlight button

apps/client/src/features/page-history/components/history-modal-body.tsx

@@ -74,16 +74,16 @@ export default function HistoryModalBody({ pageId }: Props) {
               transform: "translateX(-50%)",
             }}
           >
-            <Group gap="md">
+            <Group gap="md" wrap="nowrap">
               <Switch
                 label={t("Highlight changes")}
                 checked={highlightChanges}
                 onChange={(e) => setHighlightChanges(e.currentTarget.checked)}
-                style={{ userSelect: "none" }}
+                styles={{ label: { userSelect: "none", whiteSpace: "nowrap" } }}
               />
               {highlightChanges && diffCounts && diffCounts.total > 0 && (
-                <Group gap="xs">
-                  <Text size="sm" c="dimmed">
+                <Group gap="xs" wrap="nowrap">
+                  <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
                     {currentChangeIndex} of {diffCounts.total}
                   </Text>
                   <ActionIcon

apps/client/src/features/page-history/components/history-modal.tsx

@@ -46,7 +46,7 @@ export default function HistoryModal({ pageId, pageTitle }: Props) {
 
   return (
     <Modal.Root
-      size={1200}
+      size={1400}
       opened={isModalOpen}
       onClose={() => setModalOpen(false)}
     >