@meddleware/dashboard 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dashboard",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Meddleware tools hub — Vue 3 SPA listing hosted services (Walrus, Access Gate) with white-label deploy options.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
@@ -29,7 +29,7 @@
     "@meddleware/access-gate-ui": "^0.1.5",
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/seal-ui": "^0.0.7",
-    "@meddleware/ui": "^0.1.7",
+    "@meddleware/ui": "^0.1.9",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@meddleware/walrus-ui": "^0.1.7",
     "pinia": "^4.0.2",

package/src/App.vue

@@ -78,7 +78,7 @@ const { account, disconnect } = useWallet({
   display: grid;
   grid-template-columns: var(--mw-sidebar-width, 240px) 1fr;
   grid-template-rows: var(--mw-header-height, 56px) 1fr;
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
 }
 
@@ -87,13 +87,23 @@ const { account, disconnect } = useWallet({
 }
 
 .app-shell__sidebar {
-  height: 100%;
-  overflow-y: auto;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .app-shell__main {
   overflow-y: auto;
-  height: 100%;
+  min-height: 0;
+}
+
+@media (max-width: 720px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--mw-header-height, 56px) 1fr;
+  }
+  .app-shell__sidebar {
+    display: none;
+  }
 }
 
 .brand-mark {

package/src/components/NetworkSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Network selector for the dashboard sidebar. Reads and writes the shared useNetwork()
 // singleton so every embedded tool view reacts to the chosen network immediately.
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useNetwork } from '@meddleware/wallet-adapter'
 import type { MwNetwork } from '@meddleware/wallet-adapter'
 
@@ -20,6 +20,10 @@ function commitLocalnetUrl(): void {
   const url = localnetInput.value.trim()
   if (url) setLocalnetRpc(url)
 }
+
+onMounted(() => {
+  if (network.value === 'mainnet') setNetwork('testnet')
+})
 </script>
 
 <template>
@@ -27,12 +31,10 @@ function commitLocalnetUrl(): void {
     <label class="ns-label" for="ns-select">Network</label>
     <select id="ns-select" class="ns-select" :value="network" @change="onNetworkChange">
       <option value="testnet">Testnet</option>
-      <option value="mainnet">Mainnet</option>
+      <option value="mainnet" disabled>Mainnet</option>
       <option value="localnet">Localnet</option>
     </select>
 
-    <p v-if="network === 'mainnet'" class="ns-notice">Mainnet coming soon.</p>
-
     <template v-if="network === 'localnet'">
       <label class="ns-label ns-label--url" for="ns-localnet-url">RPC URL</label>
       <input
@@ -88,12 +90,6 @@ function commitLocalnetUrl(): void {
   outline-offset: 1px;
 }
 
-.ns-notice {
-  font-size: 0.75rem;
-  color: var(--muted, #888);
-  margin: 0;
-}
-
 .ns-input {
   background: var(--surface, transparent);
   border: 1px solid var(--border, #444);

package/src/styles.css

@@ -1,43 +1,11 @@
 /*
  * Dashboard app-layout styles. Design tokens + element defaults come from
  * @meddleware/design-tokens + @meddleware/ui/base.css (imported in main.ts).
- * This file holds only the app-shell grid and page-content helpers.
+ * App shell grid layout lives in App.vue scoped styles.
  */
 
 #app {
-  min-height: 100vh;
-}
-
-/*
- * App shell: full-width header on top; sidebar pinned left immediately under the
- * header down to the bottom of the page/viewport; main fills the central space;
- * footer spans from the sidebar's right edge to the viewport's right edge.
- */
-.app-shell {
-  display: grid;
-  grid-template-columns: var(--mw-sidebar-width, 240px) 1fr;
-  grid-template-rows: var(--mw-header-height, 56px) 1fr auto;
-  grid-template-areas:
-    "header header"
-    "sidebar main"
-    "sidebar footer";
-  min-height: 100vh;
-}
-
-.app-shell__header  { grid-area: header; }
-.app-shell__sidebar { grid-area: sidebar; }
-.app-shell__main    { grid-area: main; min-width: 0; padding: 1.5rem; }
-.app-shell__footer  { grid-area: footer; }
-
-@media (max-width: 720px) {
-  .app-shell {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-  }
-  .app-shell__sidebar { display: none; }
+  min-height: 100dvh;
 }
 
 .prose {