improve modal styles

src/View/Components/splitModal.css

@@ -1,3 +1,7 @@
+.modal>div:has(.split-modal[extended]) {
+    max-width: 64rem;
+}
+
 .split-modal {
     width: 100%;
     height: 100%;

src/View/Components/splitModal.tsx

@@ -6,12 +6,14 @@ export function SplitModal(
     leftView: React.State<Element>,
     rightView: React.State<Element>,
     scrollButtonLabel: React.State<string>,
+    extendedStyle: boolean = false,
+    navigationState?: React.State<any>,
 ) {
     const view = (
-        <div class="split-modal">
+        <div class="split-modal" toggle:extended={extendedStyle}>
             <div>
                 <div class="scroll-area" children:set={leftView}></div>
-                <div class="detail-button-wrapper">
+                <div class="detail-button-wrapper" toggle:hidden={navigationState != undefined}>
                     <button class="ghost" on:click={scrollToDetails}>
                         <span
                             class="ellipsis"
@@ -29,5 +31,7 @@ export function SplitModal(
         view.scrollLeft = view.scrollWidth;
     }
 
+    navigationState?.subscribe(scrollToDetails);
+
     return view;
 }