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;
 }

src/View/Modals/settingsModal.tsx

@@ -12,12 +12,14 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
             class="modal"
             toggle:open={settingsViewModel.isShowingSettingsModal}
         >
-            <div style="max-width: 64rem">
+            <div>
                 <main class="padding-0">
                     {SplitModal(
                         new React.State(SettingsLeftPane(settingsViewModel)),
                         new React.State(<span>settings</span>),
                         new React.State(""),
+                        false,
+                        settingsViewModel.selectedModalPage,
                     )}
                 </main>
                 <button on:click={settingsViewModel.hideSettingsModal}>
@@ -31,7 +33,7 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
 
 function SettingsLeftPane(settingsViewModel: SettingsViewModel) {
     return (
-        <div class="flex-column">
+        <div class="flex-column gap">
             {SettingsPaneButton(
                 settingsViewModel,
                 SettingsModalPages.Appearance,
@@ -42,6 +44,11 @@ function SettingsLeftPane(settingsViewModel: SettingsViewModel) {
                 SettingsModalPages.Regional,
                 translations.settings.pages.regional,
             )}
+            {SettingsPaneButton(
+                settingsViewModel,
+                SettingsModalPages.Info,
+                translations.settings.pages.info,
+            )}
         </div>
     );
 }

src/View/Modals/storageModal.tsx

@@ -64,12 +64,13 @@ export function StorageModal(storageViewModel: StorageViewModel) {
     );
     return (
         <div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
-            <div style="max-width: 64rem">
+            <div>
                 <main class="padding-0">
                     {SplitModal(
                         new React.State(DirectoryItemList(storageViewModel)),
                         detailView,
                         storageViewModel.selectedFileName,
+                        true,
                     )}
                 </main>
                 <button on:click={storageViewModel.hideStorageModal}>

src/View/translations.ts

@@ -80,6 +80,7 @@ const englishTranslations = {
         pages: {
             appearance: "Appearance",
             regional: "Language+Region",
+            info: "About Comms",
         },
     },
 
@@ -369,6 +370,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
             pages: {
                 appearance: "Erscheinungsbild",
                 regional: "Sprache+Region",
+            info: "Über Comms",
             },
         },
 
@@ -629,6 +631,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
             pages: {
                 appearance: "Aspecto",
                 regional: "Idioma+Región",
+                info: "Sobre Comms",
             },
         },
         connectionModal: {

src/ViewModel/Global/settingsViewModel.ts

@@ -65,4 +65,5 @@ export default class SettingsViewModel {
 export enum SettingsModalPages {
     Appearance,
     Regional,
+    Info,
 }