improve UI of split modals

dist/index.css

@@ -864,19 +864,34 @@ body[showing-chat] #chat-page-wrapper {
   scroll-snap-type: x mandatory;
 }
 .split-modal > div {
-  display: flex;
-  flex-direction: column;
   width: 100%;
   min-width: calc(100% - 4rem);
   flex: 0;
   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%;
   overflow-y: auto;
   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;
@@ -896,11 +911,14 @@ body[showing-chat] #chat-page-wrapper {
     flex: 1;
     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%;
   }
@@ -908,3 +926,11 @@ body[showing-chat] #chat-page-wrapper {
     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;
+  }
+}