Post milestone3m

src/databrowser.html

@@ -7,6 +7,29 @@
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         panes.runDataBrowser()
+
+        var header = document.getElementById('mainSolidUiHeader')
+        if (!header) return
+
+        var syncHeaderHeight = function () {
+          var height = header.getBoundingClientRect().height
+          if (height > 0) {
+            var rootFontSize = parseFloat(
+              getComputedStyle(document.documentElement).fontSize
+            )
+            document.documentElement.style.setProperty(
+              '--app-header-height',
+              (height / rootFontSize) + 'rem'
+            )
+          }
+        }
+
+        syncHeaderHeight()
+        if ('ResizeObserver' in window) {
+          new ResizeObserver(syncHeaderHeight).observe(header)
+        } else {
+          window.addEventListener('resize', syncHeaderHeight)
+        }
       })
     </script>
   </head>
@@ -31,13 +54,13 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+    <div class="app-main" tabindex="-1" aria-live="polite">
       <div class="app-shell">
         <aside id="NavMenu" class="app-nav" aria-label="Application menu" hidden>
           <div id="NavMenuContent" class="menu-content"></div>
         </aside>
 
-        <div class="app-view">
+        <main id="MainContent" class="app-view">
           <!--
             Outline view: the primary RDF-subject browser.
             JS appends property-table <div>s (not <tr>s) here.
@@ -66,11 +89,11 @@
           >
           <!-- globalAppTabs appends tab widget here -->
           </section>
-        </div> <!-- .app-view -->
+        </main> <!-- .app-view -->
       </div> <!-- .app-shell -->
 
       <div id="MenuOverlay" class="menu-overlay" hidden aria-hidden="true"></div>
-    </main>
+    </div>
 
     <!-- Footer — populated by solid-ui initFooter() -->
     <footer id="PageFooter" role="contentinfo">

src/index.ts

@@ -67,11 +67,14 @@ global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
 
   // Authenticate the user
   SolidLogic.authn.checkUser()
-    .then(() => panes.initMainPage(SolidLogic.solidLogicSingleton.store, uri))
+    .then(() => panes.initMainPage(
+      SolidLogic.solidLogicSingleton.store,
+      uri,
+      buildRenderEnvironment()
+    ))
     .then(() => {
-      // Inject render environment into pane context after outliner exists
+      // Re-sync in case layout/theme changed between snapshot and outliner init
       syncEnvironmentToContext('initMainPage')
-
     })
     .catch(() => undefined)
 

src/styles/mash-utilities.css

@@ -595,7 +595,7 @@
   border-radius: var(--border-radius-base, 0.3125rem);
   border: 1px solid var(--gray-400, #99A1AF);
   background: var(--white, #FFF);
-  color: var(--gray-900, #101828);
+  color: var(--color-text-subheading, var(--gray-900, #101828));
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-medium, 500);
   padding: var(--spacing-2xs, 0.625rem);
@@ -614,7 +614,7 @@
 }
 
 .label {
-  color: var(--gray-600, #4A5565);
+  color: var(--color-text-secondary, #4A5565);
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-regular, 400);
 }

src/styles/mash.css

@@ -6,10 +6,10 @@
 @import url("./mash-utilities.css");
 
 :root {
-  --app-header-height: 3.8rem;
+  --app-header-height: 3.75rem;
 }
 
-html, body {
+html {
   margin: 0;
   padding: 0;
   font-family: var(--font-family-base);
@@ -20,9 +20,24 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  min-height: auto;
+  min-width: 375px;
+}
+
+body {
+  margin: 0;
+  padding-top: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
+  height: 100dvh;
+  min-height: auto;
+  min-width: 375px;
+  overflow: hidden;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: inherit;
+  color: inherit;
 }
 
 #PageHeader,
@@ -46,6 +61,7 @@ html, body {
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
   display: flex;
+  flex-direction: column;
 }
 
 #PageFooter {
@@ -54,12 +70,21 @@ html, body {
 
 
 /* ── New responsive app nav layout ── */
+.app-main {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
+  min-height: 0;
+  margin-top: var(--app-header-height);
+  height: calc(100dvh - var(--app-header-height));
+  top: auto;
+}
+
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill #MainContent (display:flex row container) */
+  flex: 1;          /* expand to fill .app-main */
   min-width: 0;     /* prevent overflow in flex context */
-  min-height: calc(100vh - var(--app-header-height) - 2.5rem); /* header + footer space */
-  margin-top: var(--app-header-height);
+  min-height: 0;    /* allow children to shrink correctly */
 }
 
 .app-nav {
@@ -75,7 +100,7 @@ html, body {
 
 .app-view {
   flex: 1;
-  padding: 1rem;
+  padding: 0 1rem 1rem;  /* no top padding — sit flush under fixed header */
   min-width: 0;
 }
 
@@ -109,7 +134,7 @@ html, body {
   }
 
   .app-view {
-    padding: 1rem 0.75rem;
+    padding: 0 0.75rem 1rem;
   }
 
   #MenuToggleBtn {
@@ -707,114 +732,11 @@ div.exceptionPane pre {
   background-color: var(--color-cv-pane-bg);
 }
 
-/******************* Data Content Pane *****************/
-
-div.dataContentPane {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em; /* color: #404; */
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.nestedFormula {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em;
-  border-radius: 0.5em;
-}
-
-div.dataContentPane td {
-  padding-left: 0.2em;
-  padding-top: 0.1em;
-  padding-right: 0.2em;
-  padding-bottom: 0.05em;
-  /*	        vertical-align: middle; /*@@ Lalana's request*/
-  vertical-align: top; /*@@ Tims's request*/
-  /* With middel, you can't tell what is with what */
-  /* background-color: white; */
-}
-
-div.dataContentPane tr {
-  margin-bottom: 0.6em;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-.dataContentPane a {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:link {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:visited {
-  color: var(--color-text-link-visited);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:hover {
-  color: var(--color-text-link-hover);
-  text-decoration: underline;
-  font-weight: bold;
-}
-.dataContentPane a:active {
-  color: var(--color-text-link-active);
-  text-decoration: none;
-}
-
-.dataContentPane.embeddedText {
-  white-space: pre-wrap;
-}
-
-/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
-div.dataContentPane td.pred {
-  min-width: 12em;
-} /* Keep aligned with others better */
-div.dataContentPane td.pred a {
-  color: var(--color-text-muted);
-} /* Greyish as form field names have less info value */
-
-/* .collectionAsTables  {border-right: green 1px; margin: 0.2em;} */
-
-div.n3Pane {
-  padding: 1em;
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  color: var(--color-text-blue);
-}
-
 .imageView {
   border: 1em var(--color-background);
   margin: 1em;
 }
 
-.n3Pane pre {
-  font-size: 120%;
-}
-
-.RDFXMLPane pre {
-  font-size: 120%;
-}
-
-div.RDFXMLPane {
-  padding: 1em;
-  border-top: solid 2px var(--color-data-pane-border-top);
-  border-left: solid 2px var(--color-data-pane-border-top);
-  border-bottom: solid 2px var(--color-data-pane-border-side);
-  border-right: solid 2px var(--color-data-pane-border-side);
-  color: var(--color-text-brown);
-}
-
 /* Generic things useful anywhere */
 
 img.hideTillHover {
@@ -1233,6 +1155,8 @@ td.undetermined table {
   margin: 0.2em;
 }
 
+/* The following two classes were used for defaultPane
+I'm not sure if they are used anywhere else so i'm not deleting. */
 div.bottom-border {
   border: 0.2em solid transparent;
   width: 100%;
@@ -1607,10 +1531,6 @@ th {
   padding: var(--spacing-sm);
 }
 
-td {
-  padding: var(--spacing-sm);
-}
-
 /* Focus trap for modals */
 .focus-trap {
   position: fixed;
@@ -1747,11 +1667,11 @@ label:focus-visible {
 }
 
 html[data-layout="mobile"] #PageBody {
-  min-height: var(--app-height, 100dvh);
+  min-height: auto;
 }
 
 html[data-layout="mobile"] #MainContent {
-  overscroll-behavior-x: contain;
+  overscroll-behavior: x contain;
 }
 
 /* END of Generated by AI */