improve UI of split modals

src/View/Components/splitModal.css

@@ -15,9 +15,6 @@
 }
 
 .split-modal > div {
-    display: flex;
-    flex-direction: column;
-
     width: 100%;
     min-width: calc(100% - 4rem);
     flex: 0;
@@ -25,6 +22,25 @@
     scroll-snap-align: center;
 }
 
+.split-modal > div,
+.split-modal > div > .scroll-area {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: stretch;
+    justify-content: safe center;
+}
+
+.split-modal[navigation] > div > .scroll-area{
+    justify-content: start;
+}
+
+.split-modal[navigation] > div {
+    min-width: 100%;
+}
+
 .split-modal .scroll-area {
     flex: 1;
     width: 100%;
@@ -33,6 +49,10 @@
     padding: var(--content-padding);
 }
 
+.split-modal[navigation] > div:nth-child(2) > .flex-row > button {
+    transform: translateX(calc(-1 * var(--content-padding)));
+}
+
 .split-modal .detail-button-wrapper {
     display: flex;
     justify-content: end;
@@ -58,12 +78,16 @@
         min-width: unset;
     }
 
-    .split-modal:not([primitive]) > div:first-child {
+    .split-modal[navigation] > div {
+        min-width: unset;
+    }
+
+    .split-modal[navigation] > div:first-child {
         flex: 0;
         min-width: 20rem;
     }
 
-    .split-modal[primitive] > div {
+    .split-modal:not([navigation]) > div {
         width: 50%;
         min-width: 50%;
     }
@@ -72,3 +96,13 @@
         display: none;
     }
 }
+
+@media (max-width: 640px) {
+    .split-modal[navigation]:not([page-open]) > div:nth-child(2) {
+        display: none;
+    }
+
+    .split-modal[navigation][page-open] > div:first-child {
+        display: none;
+    }
+}