From ac36b8b0f927cdded32210bd0766b5aa6a5da928 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sat, 2 May 2026 19:43:49 +1000
Subject: [PATCH 01/25] remove data content pane styling move to solid-panes

---
 src/styles/mash.css | 77 ---------------------------------------------
 1 file changed, 77 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index e89ed35c..e6eb1009 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -707,83 +707,6 @@ 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);

From 89b9ca83aaf101d737f707ec573fe6bac4f4c5f4 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 3 May 2026 11:27:25 +1000
Subject: [PATCH 02/25] move n3 pane css to solid panes

---
 src/styles/mash.css | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index e6eb1009..c84a9172 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -707,24 +707,11 @@ div.exceptionPane pre {
   background-color: var(--color-cv-pane-bg);
 }
 
-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%;
 }

From 3903940bc226d69ee39dfddb8da481f9ffe74331 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 3 May 2026 11:35:42 +1000
Subject: [PATCH 03/25] move RDFXML css to solid-panes

---
 src/styles/mash.css | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index c84a9172..7e10faa0 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -712,19 +712,6 @@ div.exceptionPane pre {
   margin: 1em;
 }
 
-.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 {

From 98cf77f017c95ed0bb4ec7b9f9cd5358811adfd4 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 3 May 2026 16:12:05 +1000
Subject: [PATCH 04/25] border colors and selected bg color

---
 src/styles/themes/light.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 020234b9..1aad297f 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -95,9 +95,11 @@
   --color-border-light: #aaa;
   --color-border-pale: #eee;
   --color-border-accent: #88c;
+  --color-border-button: var(--gray-300, #D1D5DC);
+  --color-border-button-hover: var(--gray-400, #99A1AF);
   
   /* Status Colors */
-  --color-selected-bg: #8F3;
+  --color-selected-bg: var(--lavender-300, #e6dcff);
   --color-warning: red;
   --color-success-bg: #dfd;
   --color-success-border: green;

From d854ccf0483cb432305f4df862f976543cbfb276 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 3 May 2026 16:12:35 +1000
Subject: [PATCH 05/25] comment mash css

---
 src/styles/mash.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index 7e10faa0..46f93ffe 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -1130,6 +1130,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%;

From 1e3ac85892beac36663afc966e04437770aee191 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Tue, 5 May 2026 20:44:01 +1000
Subject: [PATCH 06/25] add button styles draft

---
 src/styles/themes/dark.css  |  2 ++
 src/styles/themes/light.css | 14 ++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index edd0cf95..e9be6d07 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -37,6 +37,8 @@ html[data-theme="dark"] {
   --color-border-light: #666;
   --color-border-pale: #555;
   --color-border-accent: #9999dd;
+  --color-border-button: var(--gray-800, #1E2939);
+  --color-border-button-hover: var(--gray-900, #101828);
   
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 1aad297f..6fecf82b 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -52,6 +52,20 @@
   --black: #000;  /* Used for: text heading */
   --white: #FFF;
 
+
+  /* Will move later to proper places: BEGIN semantic button tokens: shared action, tertiary, and focus colors for local dev theming */
+  --color-surface-action: var(--color-primary, #7C4DFF);
+  --color-surface-action-hover: #6d3cf2;
+  --color-surface-tertiary: var(--gray-50, #F9FAFB);
+  --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
+  --color-surface-subtle: rgba(15, 23, 43, 0.04);
+  --color-text-on-action: var(--white, #FFF);
+  --color-border-muted: var(--gray-300, #D1D5DC);
+  --color-border-action: var(--color-primary, #7C4DFF);
+  --color-focus-ring: var(--color-primary, #7C4DFF);
+  --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
+  /* END semantic button tokens */
+
   /* Background and Text */
   --color-background-old: #FFFFFF; /* White */
   --color-background: #F8F9FB; /* Light grey for overall background */

From 49045b07d1b8303e1ec47911aebcb27acf2d8f7f Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Wed, 6 May 2026 07:13:00 +1000
Subject: [PATCH 07/25] change weback new header loc

---
 webpack.config.mjs | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/webpack.config.mjs b/webpack.config.mjs
index 22b32469..a0de7e6d 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -25,7 +25,7 @@ const workspaceAliases = {
   'solid-panes$': path.resolve('../solid-panes/src/index.ts'),
   'solid-ui$': path.resolve('../solid-ui/src/index.ts'),
   'UI$': path.resolve('../solid-ui/src/index.ts'),
-  'solid-ui/components/header$': path.resolve('../solid-ui/src/v2/components/header/index.ts'),
+  'solid-ui/components/header$': path.resolve('../solid-ui/src/v2/components/layout/header/index.ts'),
 }
 
 function getResolutionMode (env = {}) {
@@ -186,7 +186,7 @@ export default (env, args) => {
 
   // For dev server or watch mode, return only unminified config (preserves console.log)
   if (process.env.WEBPACK_SERVE || args.mode === 'development' || isWatchMode) {
-    return {
+    const developmentBundle = {
       ...common,
       mode: 'development',
       output: {
@@ -199,6 +199,19 @@ export default (env, args) => {
         minimize: false
       }
     }
+
+    // Keep both bundle names in sync during watch/dev runs because downstream
+    // servers and templates may reference either path.
+    return [
+      developmentBundle,
+      {
+        ...developmentBundle,
+        output: {
+          ...developmentBundle.output,
+          filename: 'mashlib.min.js'
+        }
+      }
+    ]
   }
 
   // UMD Minified, everything bundled

From 985d6485a8f0a94a3d82236f46a7d578a305048f Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Wed, 6 May 2026 13:24:15 +1000
Subject: [PATCH 08/25] slight reduction app view padding

---
 src/styles/mash.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index 46f93ffe..13a6eb67 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -109,7 +109,7 @@ html, body {
   }
 
   .app-view {
-    padding: 1rem 0.75rem;
+    padding: var(--spacing-sm, 0.938rem) var(--spacing-2xs, 0.625rem);
   }
 
   #MenuToggleBtn {

From 79baedfacce1af256b50261141415d1e14e559c5 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Wed, 6 May 2026 17:33:56 +1000
Subject: [PATCH 09/25] remove td padding think it was added accidently

---
 src/styles/mash.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index 13a6eb67..2b1114bc 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -1506,10 +1506,6 @@ th {
   padding: var(--spacing-sm);
 }
 
-td {
-  padding: var(--spacing-sm);
-}
-
 /* Focus trap for modals */
 .focus-trap {
   position: fixed;

From 802dcf5933e907acaf2524ecd51d6002cc073e18 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 10 May 2026 18:30:54 +1000
Subject: [PATCH 10/25] label text use vars

---
 src/styles/mash-utilities.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/mash-utilities.css b/src/styles/mash-utilities.css
index 33e621f2..2960d7bf 100644
--- a/src/styles/mash-utilities.css
+++ b/src/styles/mash-utilities.css
@@ -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);
 }

From 8509aed2c7768a2f3590ad7372b9417567e8b721 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 10 May 2026 18:31:05 +1000
Subject: [PATCH 11/25] button vars

---
 src/styles/themes/dark.css  |  8 ++++++++
 src/styles/themes/light.css | 10 ++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index e9be6d07..4cad7a3b 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -19,6 +19,14 @@ html[data-theme="dark"] {
   --color-text-blue: #7cb9ff;
   --color-text-brown: #c4a660;
   
+  /* Buttons */
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-100, #F3F4F6);
+  --dialog-cancel-button-border: var(--color-border-light, #666);
+  --dialog-cancel-button-hover-background: var(--color-primary, #B388FF);
+  --dialog-cancel-button-hover-text: var(--color-text-on-action, #1e1e1e);
+  --dialog-cancel-button-hover-border: var(--color-primary, #B388FF);
+
   /* Header */
   --color-header-row-bg: var(--grey-purple-900, #332746);
   --color-header-text: var(--white, #fff);
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 6fecf82b..b5133719 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -63,6 +63,12 @@
   --color-border-muted: var(--gray-300, #D1D5DC);
   --color-border-action: var(--color-primary, #7C4DFF);
   --color-focus-ring: var(--color-primary, #7C4DFF);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-800, #1E2939);
+  --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
+  --dialog-cancel-button-hover-background: var(--blue-900, #083575);
+  --dialog-cancel-button-hover-text: var(--white, #FFF);
+  --dialog-cancel-button-hover-border: var(--blue-900, #083575);
   --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
   /* END semantic button tokens */
 
@@ -114,11 +120,11 @@
   
   /* Status Colors */
   --color-selected-bg: var(--lavender-300, #e6dcff);
-  --color-warning: red;
+  --color-warning: var(--red-600, #B00020);
   --color-success-bg: #dfd;
   --color-success-border: green;
   --color-failure-bg: white;
-  --color-failure-border: red;
+  --color-failure-border: var(--red-600, #B00020);
   
   /* Info and Alert Colors */
   --color-info-bg: #ccccff;

From ec32ff0885da918152186d49b3c204167e8c9ad1 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Sun, 10 May 2026 21:21:15 +1000
Subject: [PATCH 12/25] error msg vars

---
 src/styles/themes/dark.css  |  5 +++++
 src/styles/themes/light.css | 10 +++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index 4cad7a3b..737821c4 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -27,6 +27,11 @@ html[data-theme="dark"] {
   --dialog-cancel-button-hover-text: var(--color-text-on-action, #1e1e1e);
   --dialog-cancel-button-hover-border: var(--color-primary, #B388FF);
 
+  /* Error dialog box colors */
+  --dialog-error-background: rgba(176, 0, 32, 0.18);
+  --dialog-error-border: rgba(255, 118, 154, 0.5);
+  --dialog-error-text: #ffbbcd;
+  
   /* Header */
   --color-header-row-bg: var(--grey-purple-900, #332746);
   --color-header-text: var(--white, #fff);
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index b5133719..2bd31cce 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -53,7 +53,7 @@
   --white: #FFF;
 
 
-  /* Will move later to proper places: BEGIN semantic button tokens: shared action, tertiary, and focus colors for local dev theming */
+  /* Button colors */
   --color-surface-action: var(--color-primary, #7C4DFF);
   --color-surface-action-hover: #6d3cf2;
   --color-surface-tertiary: var(--gray-50, #F9FAFB);
@@ -70,8 +70,12 @@
   --dialog-cancel-button-hover-text: var(--white, #FFF);
   --dialog-cancel-button-hover-border: var(--blue-900, #083575);
   --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
-  /* END semantic button tokens */
-
+ 
+  /* Error dialog box colors */
+  --dialog-error-background: var(--pink-500, #ffdde6);
+  --dialog-error-border: var(--pink-700, #ff98b3);
+  --dialog-error-text: var(--red-600, #B00020);
+  
   /* Background and Text */
   --color-background-old: #FFFFFF; /* White */
   --color-background: #F8F9FB; /* Light grey for overall background */

From 79c35105356226adeda21e9be03bec910011e074 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Mon, 11 May 2026 06:04:34 +1000
Subject: [PATCH 13/25] color-text-ui var

---
 src/styles/themes/light.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 2bd31cce..ecd12d04 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -82,7 +82,9 @@
   --color-background-row-default: white;
   --color-background-row-alternate: #f0f0f0;
   --color-text: #1A1A1A; /* Used in login button */
+  --color-text-ui: var(--gray-100, #F3F4F6);
   --color-text-primary: var(--gray-700, #364153); /* new design */
+  --color-text-ui: var(--slate-700, #314158);
   --color-text-secondary-old: #666;
   --color-text-secondary: var(--gray-600, #4A5565);
   --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */

From 9428fbe5232bc0905386a090586925b55e175016 Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Mon, 11 May 2026 06:27:16 +1000
Subject: [PATCH 14/25] add new vars for light and dark

---
 src/styles/themes/dark.css  | 15 ++++++++++++++-
 src/styles/themes/light.css |  4 +++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index 737821c4..6b6ae863 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -8,6 +8,8 @@ html[data-theme="dark"] {
   --color-background: #1e1e1e;
   --color-text: #e0e0e0;
   --color-text-secondary: #999;
+  --color-text-ui: var(--gray-800, #1E2939);
+  --color-text-control: var(--gray-100, #F3F4F6);
   --color-text-light: #555;
   --color-text-link: #66b3ff;
   --color-text-link-visited: #66b3ff;
@@ -19,7 +21,18 @@ html[data-theme="dark"] {
   --color-text-blue: #7cb9ff;
   --color-text-brown: #c4a660;
   
-  /* Buttons */
+   /* Button colors */
+  --color-surface-action: var(--color-primary, #B388FF);
+  --color-surface-action-hover: #c39cff;
+  --color-surface-overlay: var(--gray-800, #1E2939);
+  --color-surface-tertiary: #2a2a2a;
+  --color-surface-tertiary-hover: #333333;
+  --color-surface-subtle: rgba(255, 255, 255, 0.08);
+  --color-text-on-action: var(--gray-900, #101828);
+  --color-border-muted: var(--color-border-light, #666);
+  --color-border-action: var(--color-primary, #B388FF);
+  --color-focus-ring: var(--color-primary, #B388FF);
+  --color-focus-gap: var(--gray-900, #101828);
   --dialog-cancel-button-background: transparent;
   --dialog-cancel-button-text: var(--gray-100, #F3F4F6);
   --dialog-cancel-button-border: var(--color-border-light, #666);
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index ecd12d04..21f64fe2 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -56,6 +56,7 @@
   /* Button colors */
   --color-surface-action: var(--color-primary, #7C4DFF);
   --color-surface-action-hover: #6d3cf2;
+  --color-surface-overlay: var(--white, #FFF);
   --color-surface-tertiary: var(--gray-50, #F9FAFB);
   --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
   --color-surface-subtle: rgba(15, 23, 43, 0.04);
@@ -63,6 +64,7 @@
   --color-border-muted: var(--gray-300, #D1D5DC);
   --color-border-action: var(--color-primary, #7C4DFF);
   --color-focus-ring: var(--color-primary, #7C4DFF);
+  --color-focus-gap: var(--white, #FFF);
   --dialog-cancel-button-background: transparent;
   --dialog-cancel-button-text: var(--gray-800, #1E2939);
   --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
@@ -84,7 +86,7 @@
   --color-text: #1A1A1A; /* Used in login button */
   --color-text-ui: var(--gray-100, #F3F4F6);
   --color-text-primary: var(--gray-700, #364153); /* new design */
-  --color-text-ui: var(--slate-700, #314158);
+  --color-text-control: var(--slate-700, #314158);
   --color-text-secondary-old: #666;
   --color-text-secondary: var(--gray-600, #4A5565);
   --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */

From 4414e947e5e779a2008024a7922ff3e0faf6b55a Mon Sep 17 00:00:00 2001
From: Sharon Stratsianis <sstratsianis@gmail.com>
Date: Mon, 11 May 2026 17:45:03 +1000
Subject: [PATCH 15/25] more vars

---
 src/styles/mash-utilities.css |  2 +-
 src/styles/themes/dark.css    | 31 +++++++++++++++++++++++++------
 src/styles/themes/light.css   | 12 ++++++++++++
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/styles/mash-utilities.css b/src/styles/mash-utilities.css
index 2960d7bf..abeffb06 100644
--- a/src/styles/mash-utilities.css
+++ b/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);
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index 6b6ae863..4bc1486a 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -7,9 +7,19 @@ html[data-theme="dark"] {
   /* Background and Text */
   --color-background: #1e1e1e;
   --color-text: #e0e0e0;
-  --color-text-secondary: #999;
+  --color-text-secondary: var(--gray-400, #99A1AF);
+  --color-text-subheading: var(--gray-100, #F3F4F6);
+  --color-text-detail: var(--gray-300, #D1D5DC);
+  --color-text-empty-state: var(--gray-200, #E5E7EB);
+  --color-icon-muted: var(--gray-400, #99A1AF); 
+  --color-text-overlay: var(--gray-100, #F3F4F6);
+  --color-text-accent-subtle: var(--gray-100, #F3F4F6);
+  --color-text-strong: var(--gray-100, #F3F4F6);
+  --color-text-strong-secondary: var(--gray-200, #E5E7EB);
+  --color-text-light: #555;
   --color-text-ui: var(--gray-800, #1E2939);
   --color-text-control: var(--gray-100, #F3F4F6);
+  --color-text-primary: var(--gray-300, #D1D5DC);
   --color-text-light: #555;
   --color-text-link: #66b3ff;
   --color-text-link-visited: #66b3ff;
@@ -24,9 +34,15 @@ html[data-theme="dark"] {
    /* Button colors */
   --color-surface-action: var(--color-primary, #B388FF);
   --color-surface-action-hover: #c39cff;
+  --color-surface-accent-subtle: var(--grey-purple-900, #332746);
+  --color-surface-accent-subtle-hover: var(--grey-purple-700, #5e546d);
   --color-surface-overlay: var(--gray-800, #1E2939);
-  --color-surface-tertiary: #2a2a2a;
-  --color-surface-tertiary-hover: #333333;
+  --color-surface-overlay-header: var(--gray-900, #101828);
+  --color-surface-tertiary: var(--gray-800, #1E2939);
+  --color-surface-tertiary-hover: var(--gray-900, #101828);
+  --color-surface-chip: var(--color-card-bg, #2a2a2a);
+  --color-surface-framed-content: var(--color-card-bg, #2a2a2a);
+  --color-surface-placeholder: var(--gray-700, #364153);
   --color-surface-subtle: rgba(255, 255, 255, 0.08);
   --color-text-on-action: var(--gray-900, #101828);
   --color-border-muted: var(--color-border-light, #666);
@@ -59,12 +75,14 @@ html[data-theme="dark"] {
   /* Borders */
   --color-border: #444;
   --color-border-dark: #555;
-  --color-border-darker: #333;
+  --color-border-darker: var(--gray-800, #1E2939);
   --color-border-light: #666;
+  --color-border-lighter: var(--gray-700, #364153);
+  --color-border-subtle: var(--gray-700, #364153);
   --color-border-pale: #555;
   --color-border-accent: #9999dd;
-  --color-border-button: var(--gray-800, #1E2939);
-  --color-border-button-hover: var(--gray-900, #101828);
+  --color-border-button: var(--gray-700, #364153);
+  --color-border-button-hover: var(--gray-600, #4A5565);
   
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
@@ -214,6 +232,7 @@ html[data-theme="dark"] {
   --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 21f64fe2..80f799ef 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -56,9 +56,14 @@
   /* Button colors */
   --color-surface-action: var(--color-primary, #7C4DFF);
   --color-surface-action-hover: #6d3cf2;
+  --color-surface-accent-subtle: var(--lavender-300, #e6dcff);
+  --color-surface-accent-subtle-hover: var(--lavender-200, #E4DBFE);
   --color-surface-overlay: var(--white, #FFF);
+  --color-surface-overlay-header: var(--slate-50, #F8FAFC);
   --color-surface-tertiary: var(--gray-50, #F9FAFB);
   --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
+  --color-surface-chip: var(--gray-100, #F3F4F6);
+  --color-surface-framed-content: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
   --color-surface-subtle: rgba(15, 23, 43, 0.04);
   --color-text-on-action: var(--white, #FFF);
   --color-border-muted: var(--gray-300, #D1D5DC);
@@ -91,8 +96,13 @@
   --color-text-secondary: var(--gray-600, #4A5565);
   --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
   --color-text-subheading: var(--gray-900, #101828); /* new design */
+  --color-text-overlay: var(--gray-800, #1E2939);
+  --color-text-accent-subtle: var(--color-text-control, var(--slate-700, #314158));
   --color-text-strong: var(--slate-900, #0F172B); /* new design */
   --color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
+  --color-text-detail: var(--slate-500, #62748E);
+  --color-text-empty-state: var(--gray-400, #99A1AF);
+  --color-icon-muted: var(--slate-400, #90A1B9);
   --color-text-light: #aaa;
   --color-text-link: #3B5998;
   --color-text-link-visited: #3B5998;
@@ -121,6 +131,7 @@
   --color-border-dark: #777;
   --color-border-darker: var(--gray-600, #4A5565); /* old #444 */
   --color-border-light: #aaa;
+  --color-border-subtle: var(--gray-100, #F3F4F6);
   --color-border-pale: #eee;
   --color-border-accent: #88c;
   --color-border-button: var(--gray-300, #D1D5DC);
@@ -309,6 +320,7 @@
   --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);

From 137700cc9eabc7a17c54c4d89ecdb1b96c931b5d Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Mon, 11 May 2026 16:34:32 +0200
Subject: [PATCH 16/25] Promote .app-view to the page-level <main> landmark

The shell's outer `#MainContent` wrapper was a <main>, but each pane
also rendered its own <main> (profile-pane, mainPage) or inherited one
from solid-ui's tab widget body. That produced multiple <main>
landmarks per page, which is invalid per HTML semantics and triggers
accessibility warnings.

Promote `.app-view` to <main id="MainContent"> so there is exactly one
page-level landmark, encompassing the outline view and global
dashboard but excluding the application sidebar nav and menu overlay.
The skip-link target `#MainContent` is preserved.

Paired with:
- SolidOS/solid-ui: demote tab-widget body from <main> to <div>
- SolidOS/profile-pane: drop inner <main> from ProfileView/EditProfileView

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/databrowser.html | 8 ++++----
 static/browse.html   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/databrowser.html b/src/databrowser.html
index 716cfd79..c80050ef 100644
--- a/src/databrowser.html
+++ b/src/databrowser.html
@@ -31,13 +31,13 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+    <div 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 +66,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">
diff --git a/static/browse.html b/static/browse.html
index eaf4f292..a07ecb32 100644
--- a/static/browse.html
+++ b/static/browse.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"

From 21e8a46a17f86913dba11baa7c508b00447a77dc Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Mon, 11 May 2026 17:02:50 +0200
Subject: [PATCH 17/25] fix the profile pane not showing

---
 src/styles/mash.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index 46f93ffe..e0d18349 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -41,11 +41,11 @@ html, body {
 
 #MainContent {
   flex: 1 1 auto;
+  min-width: 0;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
-  display: flex;
 }
 
 #PageFooter {

From 34e55b38fc473e90b009a2aaa3f8f55ff9660e4d Mon Sep 17 00:00:00 2001
From: m5x5 <michaelpeters5647@gmail.com>
Date: Mon, 11 May 2026 17:08:58 +0200
Subject: [PATCH 18/25] Fix #MainContent CSS after moving the id to .app-view

When the id `MainContent` was moved from the outer wrapper to
`.app-view`, the existing rule `#MainContent { display: flex }`
started applying to the new element, whose children are
`#OutlineView` and `#GlobalDashboard`. Both became row-direction
flex items and `#GlobalDashboard` collapsed to ~36px wide, so
clicking sidebar items ("Your profile" etc.) rendered the pane
content into an invisible column.

Remove `display: flex` from the `#MainContent` rule (the outer
wrapper was the only thing that needed to be a flex container),
add `min-width: 0` so it still cooperates as a flex child of
`.app-shell`, and update the stale `.app-view` comment.

Also strip the redundant `role="main"` from
`static/browse-test.html` to match `browse.html`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles/mash.css     | 2 +-
 static/browse-test.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index e0d18349..39b8ca0e 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -56,7 +56,7 @@ html, body {
 /* ── New responsive app nav layout ── */
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill #MainContent (display:flex row container) */
+  flex: 1;          /* expand to fill .app-shell row */
   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);
diff --git a/static/browse-test.html b/static/browse-test.html
index c5559972..d45cd98d 100644
--- a/static/browse-test.html
+++ b/static/browse-test.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"

From f20890bb5d4b120e09838fbd628cdbcf512f771d Mon Sep 17 00:00:00 2001
From: Timea <4144203+timea-solid@users.noreply.github.com>
Date: Thu, 14 May 2026 14:45:40 +0200
Subject: [PATCH 19/25] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/styles/themes/light.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 80f799ef..d627e4a5 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -76,7 +76,6 @@
   --dialog-cancel-button-hover-background: var(--blue-900, #083575);
   --dialog-cancel-button-hover-text: var(--white, #FFF);
   --dialog-cancel-button-hover-border: var(--blue-900, #083575);
-  --color-header-menu-item-hover: var(--lavender-300, #e6dcff);
  
   /* Error dialog box colors */
   --dialog-error-background: var(--pink-500, #ffdde6);

From 7e79d0d5ef9fd8c2abe17e2dc862f79e8a1d7457 Mon Sep 17 00:00:00 2001
From: timea-solid <4144203+timea-solid@users.noreply.github.com>
Date: Thu, 14 May 2026 14:57:11 +0200
Subject: [PATCH 20/25] remove duplicate

---
 src/styles/themes/dark.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index 4bc1486a..a8f444b4 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -20,7 +20,6 @@ html[data-theme="dark"] {
   --color-text-ui: var(--gray-800, #1E2939);
   --color-text-control: var(--gray-100, #F3F4F6);
   --color-text-primary: var(--gray-300, #D1D5DC);
-  --color-text-light: #555;
   --color-text-link: #66b3ff;
   --color-text-link-visited: #66b3ff;
   --color-text-link-hover: #66b3ff;

From b1024cb0b2532502837c990276d49e5a919e271d Mon Sep 17 00:00:00 2001
From: timea-solid <4144203+timea-solid@users.noreply.github.com>
Date: Thu, 14 May 2026 19:42:38 +0200
Subject: [PATCH 21/25] fix height of left side menu

---
 src/databrowser.html | 21 ++++++++++++++++++++-
 src/styles/mash.css  | 33 +++++++++++++++++++++++++--------
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/databrowser.html b/src/databrowser.html
index c80050ef..47dd2222 100644
--- a/src/databrowser.html
+++ b/src/databrowser.html
@@ -7,6 +7,25 @@
     <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) {
+            document.documentElement.style.setProperty(
+              '--app-header-height', height + 'px'
+            )
+          }
+        }
+
+        syncHeaderHeight()
+        if ('ResizeObserver' in window) {
+          new ResizeObserver(syncHeaderHeight).observe(header)
+        } else {
+          window.addEventListener('resize', syncHeaderHeight)
+        }
       })
     </script>
   </head>
@@ -31,7 +50,7 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <div 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>
diff --git a/src/styles/mash.css b/src/styles/mash.css
index 39b8ca0e..45853da5 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -9,7 +9,7 @@
   --app-header-height: 3.8rem;
 }
 
-html, body {
+html {
   margin: 0;
   padding: 0;
   font-family: var(--font-family-base);
@@ -20,9 +20,20 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
+}
+
+body {
+  margin: 0;
+  padding-top: var(--app-header-height); /* reserve space for fixed header */
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
+  min-height: 100dvh;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: inherit;
+  color: inherit;
 }
 
 #PageHeader,
@@ -41,11 +52,12 @@ html, body {
 
 #MainContent {
   flex: 1 1 auto;
-  min-width: 0;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
+  display: flex;
+  flex-direction: column;
 }
 
 #PageFooter {
@@ -54,12 +66,17 @@ html, body {
 
 
 /* ── New responsive app nav layout ── */
+.app-main {
+  display: flex;
+  flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
+  min-height: 0;
+}
+
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill .app-shell row */
+  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 +92,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 +126,7 @@ html, body {
   }
 
   .app-view {
-    padding: 1rem 0.75rem;
+    padding: 0 0.75rem 1rem;
   }
 
   #MenuToggleBtn {

From f3e8e1746a67cc68738462c2cfd58047954d012f Mon Sep 17 00:00:00 2001
From: timea-solid <4144203+timea-solid@users.noreply.github.com>
Date: Sun, 17 May 2026 16:05:51 +0200
Subject: [PATCH 22/25] improved header height and chnaged height to auto

---
 src/databrowser.html |  6 +++++-
 src/styles/mash.css  | 14 ++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/databrowser.html b/src/databrowser.html
index 47dd2222..949de74a 100644
--- a/src/databrowser.html
+++ b/src/databrowser.html
@@ -14,8 +14,12 @@
         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 + 'px'
+              '--app-header-height',
+              (height / rootFontSize) + 'rem'
             )
           }
         }
diff --git a/src/styles/mash.css b/src/styles/mash.css
index 45853da5..2d9eeb70 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -6,7 +6,7 @@
 @import url("./mash-utilities.css");
 
 :root {
-  --app-header-height: 3.8rem;
+  --app-header-height: 3.75rem;
 }
 
 html {
@@ -20,15 +20,15 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
+  min-height: auto;
 }
 
 body {
   margin: 0;
-  padding-top: var(--app-header-height); /* reserve space for fixed header */
+  padding-top: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;
+  min-height: auto;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -67,9 +67,11 @@ body {
 
 /* ── New responsive app nav layout ── */
 .app-main {
+  position: relative;
   display: flex;
   flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
   min-height: 0;
+  top: var(--app-header-height);
 }
 
 .app-shell {
@@ -1663,11 +1665,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 */
\ No newline at end of file

From fe61b77535f8051c69e7cb4fc9f869617c5f51ff Mon Sep 17 00:00:00 2001
From: timea-solid <4144203+timea-solid@users.noreply.github.com>
Date: Sun, 17 May 2026 16:11:44 +0200
Subject: [PATCH 23/25] fixed scroll starting with offset

---
 src/styles/mash.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index 2d9eeb70..0d408889 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -28,7 +28,9 @@ body {
   padding-top: 0;
   display: flex;
   flex-direction: column;
+  height: 100dvh;
   min-height: auto;
+  overflow: hidden;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -67,11 +69,13 @@ body {
 
 /* ── New responsive app nav layout ── */
 .app-main {
-  position: relative;
+  position: static;
   display: flex;
   flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
   min-height: 0;
-  top: var(--app-header-height);
+  margin-top: var(--app-header-height);
+  height: calc(100dvh - var(--app-header-height));
+  top: auto;
 }
 
 .app-shell {

From 0a6883059a9f0b8b5a30939ee25ed0c80854b8a1 Mon Sep 17 00:00:00 2001
From: timea-solid <4144203+timea-solid@users.noreply.github.com>
Date: Sun, 17 May 2026 18:56:29 +0200
Subject: [PATCH 24/25] improve evvironment initialization & added min-width

---
 src/index.ts        | 9 ++++++---
 src/styles/mash.css | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 3505746f..5ce2d05d 100644
--- a/src/index.ts
+++ b/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)
 
diff --git a/src/styles/mash.css b/src/styles/mash.css
index 0d408889..d271e6dc 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -21,6 +21,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   min-height: auto;
+  min-width: 350px;
 }
 
 body {
@@ -30,6 +31,7 @@ body {
   flex-direction: column;
   height: 100dvh;
   min-height: auto;
+  min-width: 350px;
   overflow: hidden;
   font-family: inherit;
   font-size: inherit;

From 7888c42356fafdd485ccd3cd9d891a3202cdde32 Mon Sep 17 00:00:00 2001
From: timea-solid <4144203+timea-solid@users.noreply.github.com>
Date: Mon, 18 May 2026 11:44:28 +0200
Subject: [PATCH 25/25] set min-width 375px

---
 src/styles/mash.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/mash.css b/src/styles/mash.css
index d271e6dc..c7950565 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -21,7 +21,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   min-height: auto;
-  min-width: 350px;
+  min-width: 375px;
 }
 
 body {
@@ -31,7 +31,7 @@ body {
   flex-direction: column;
   height: 100dvh;
   min-height: auto;
-  min-width: 350px;
+  min-width: 375px;
   overflow: hidden;
   font-family: inherit;
   font-size: inherit;