Mobile Dialog Bottom Pop Up Fix

[SharonStrats]

This helps resolve this ticket from profile-pane here and the new ticket in mashlib here

[Copilot]

Pull request overview

This PR adjusts mashlib’s mobile layout/scrolling behavior and header sizing to address mobile dialog overflow issues (profile-pane tickets), while also updating theme variables and local dev bundling behavior.

Changes:

• Add dynamic header-height syncing in src/databrowser.html and adjust the main app shell markup/layout.
• Update core layout CSS (flex structure, padding, mobile sizing/scroll behavior) and expand theme token variables.
• Update webpack dev/watch behavior to emit both mashlib.js and mashlib.min.js, and adjust a workspace alias for the solid-ui header.

Reviewed changes

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
webpack.config.mjs	Updates workspace alias path and changes dev/watch output to emit both bundle filenames.
static/browse.html	Removes explicit role="main" from the <main> element (implicit role remains).
static/browse-test.html	Same as browse.html for the test page.
src/styles/themes/light.css	Adds/updates multiple CSS variables for surfaces, text, borders, focus, and status colors.
src/styles/themes/dark.css	Adds/updates multiple CSS variables for dark theme parity with light theme tokens.
src/styles/mash.css	Refactors layout CSS for header/app shell, scroll behavior, and mobile overrides; removes some legacy blocks.
src/styles/mash-utilities.css	Switches some utility colors to theme variables for better theme consistency.
src/index.ts	Passes a render-environment snapshot into panes.initMainPage() and re-syncs after init.
src/databrowser.html	Adds header height measurement/observer and updates the DOM structure for the app shell.

Comments suppressed due to low confidence (2)

src/styles/mash.css:1677

• overscroll-behavior: x contain; is not valid CSS (the overscroll-behavior shorthand only accepts 1–2 values like contain/none/auto). Use overscroll-behavior-x: contain; or overscroll-behavior: contain; instead so the rule actually takes effect on mobile.

html[data-layout="mobile"] #MainContent {
  overscroll-behavior: x contain;
}

src/styles/mash.css:1161

• Spelling/grammar in this comment: “i'm” should be capitalized (“I'm”), and the sentence can be split for readability.

/* The following two classes were used for defaultPane
I'm not sure if they are used anywhere else so i'm not deleting. */

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[NoelDeMartin]

Was this change really necessary? Ideally, we shouldn't have horizontal overflow... But if we do, it's better to have a scroll than hide the content. Did this work correctly with auto overflow for both directions? I think the proper fix would be to push all the content to overflow vertically.

[SharonStrats]

Do you mean overflow-x: hidden? overflow-y auto is what we need otherwise it doesn't work. But I didn't want to change it too much so i left x hidden.

[NoelDeMartin]

Yeah, I mean we should have overflow: auto (which targets both x and y). It's generally best not to use overflow hidden for content divs, specially not in the body element.

The idea is that if you want something to not overflow, set the CSS so that the content wraps. But in cases where oveflow really happens, many times it's better to just show a scrollbar rather than hide content and potentially hide important information for users.

[SharonStrats]

Cool, I thought that's what you meant but just wanted to be sure.