pinokiod 3.265.0 → 3.271.0

package/kernel/index.js

@@ -803,6 +803,7 @@ class Kernel {
   async init(options) {
 
     let home = this.store.get("home") || process.env.PINOKIO_HOME
+    this.homedir = home
 
     // reset shells if they exist
     if (this.shell) {
@@ -820,10 +821,9 @@ class Kernel {
     this.kv = new KV(this)
     this.cloudflare = new Cloudflare()
     this.peer = new Peer(this)
+    await this.peer.initialize(this)
     this.git = new Git(this)
 
-    this.homedir = home
-
 //    if (home) {
 //      this.homedir = home
 //    } else {

package/kernel/peer.js

@@ -1,6 +1,7 @@
 const dgram = require('dgram');
 const axios = require('axios');
 const os = require('os')
+const systeminformation = require('systeminformation')
 const Environment = require("./environment")
 class PeerDiscovery {
   constructor(kernel, port = 41234, message = 'ping', interval = 1000) {
@@ -12,9 +13,8 @@ class PeerDiscovery {
     this.peers = new Set();
     this.interface_addresses = []
     this.host_candidates = []
-    this.host = this._getLocalIPAddress()
+    this.host = null
     this.default_port = 42000
-    this.peers.add(this.host)
     this.router_info_cache = {}
 //    this.start();
   }
@@ -85,6 +85,13 @@ class PeerDiscovery {
       this.active = false
     }
   }
+  // Prepare host/peer state before the rest of the kernel bootstraps
+  async initialize(kernel) {
+    await this.refreshLocalAddress()
+    if (kernel) {
+      await this.check(kernel)
+    }
+  }
   async start(kernel) {
     let env = await Environment.get(kernel.homedir, kernel)
 
@@ -576,23 +583,70 @@ class PeerDiscovery {
   _isLocalLAN(ip) {
     return this.isRFC1918(ip)
   }
-  _getLocalIPAddress() {
-    this.interface_addresses = this._collectInterfaceAddresses()
-    const shareable = this.interface_addresses.filter((entry) => entry.shareable)
-    this.host_candidates = shareable
-    const lanCandidate = shareable.find((entry) => entry.scope === 'lan')
-    if (lanCandidate) {
-      return lanCandidate.address
+  // Refresh LAN/IP selection; keeps peers set in sync with the active address
+  async refreshLocalAddress() {
+    try {
+      const { host, host_candidates, interface_addresses } = await this._getLocalIPAddress()
+      this.interface_addresses = interface_addresses
+      this.host_candidates = host_candidates
+      if (host && this.host !== host) {
+        if (this.host) {
+          this.peers.delete(this.host)
+        }
+        this.host = host
+      } else if (!this.host) {
+        this.host = host
+      }
+      if (this.host) {
+        this.peers.add(this.host)
+      }
+      return this.host
+    } catch (err) {
+      console.error('peer refreshLocalAddress error', err)
+      if (!this.host) {
+        this.host = null
+      }
+      return this.host
+    }
+  }
+  async _getLocalIPAddress() {
+    const interface_addresses = await this._collectInterfaceAddresses()
+    const shareable = interface_addresses.filter((entry) => entry.shareable)
+    const host_candidates = shareable.map((entry) => ({
+      address: entry.address,
+      netmask: entry.netmask,
+      interface: entry.interface,
+      scope: entry.scope,
+      shareable: entry.shareable,
+      type: entry.type || null,
+      operstate: entry.operstate || null,
+      virtual: entry.virtual || false,
+      default: entry.default || false,
+      prefixLength: entry.prefixLength,
+      mac: entry.mac || null,
+      score: this._scoreCandidate(entry)
+    }))
+    let selectedHost = null
+    let bestScore = -Infinity
+    host_candidates.forEach((candidate, index) => {
+      const score = typeof candidate.score === 'number' ? candidate.score : -Infinity
+      if (score > bestScore) {
+        bestScore = score
+        selectedHost = candidate.address
+      } else if (score === bestScore && selectedHost === null) {
+        selectedHost = candidate.address
+      }
+    })
+    if (!selectedHost && shareable.length > 0) {
+      selectedHost = shareable[0].address
     }
-    const cgnatCandidate = shareable.find((entry) => entry.scope === 'cgnat')
-    if (cgnatCandidate) {
-      return cgnatCandidate.address
+    if (!selectedHost && interface_addresses.length > 0) {
+      selectedHost = interface_addresses[0].address
     }
-    const publicCandidate = shareable.find((entry) => entry.scope === 'public')
-    if (publicCandidate) {
-      return publicCandidate.address
+    if (!selectedHost) {
+      selectedHost = '127.0.0.1'
     }
-    return shareable.length > 0 ? shareable[0].address : null
+    return { host: selectedHost, host_candidates, interface_addresses }
   }
   isPrivateOrCGNAT(ip) {
     return this.isRFC1918(ip) || this.isCGNAT(ip)
@@ -626,7 +680,7 @@ class PeerDiscovery {
     }
     return secondOctet >= 16 && secondOctet <= 31
   }
-  _collectInterfaceAddresses() {
+  _collectInterfaceAddressesSync() {
     const interfaces = os.networkInterfaces()
     const results = []
     const seen = new Set()
@@ -653,12 +707,51 @@ class PeerDiscovery {
           interface: ifaceName,
           internal: Boolean(iface.internal),
           scope: classification.scope,
-          shareable: classification.shareable
+          shareable: classification.shareable,
+          mac: typeof iface.mac === 'string' ? iface.mac : null
         })
       }
     }
     return results
   }
+  async _collectInterfaceAddresses() {
+    const baseEntries = this._collectInterfaceAddressesSync()
+    let metadata = []
+    try {
+      metadata = await systeminformation.networkInterfaces()
+    } catch (err) {
+      metadata = []
+    }
+    const metadataMap = new Map()
+    if (Array.isArray(metadata)) {
+      metadata.forEach((entry) => {
+        if (entry && typeof entry.iface === 'string') {
+          metadataMap.set(this._normalizeInterfaceName(entry.iface), entry)
+        }
+      })
+    }
+    return baseEntries.map((entry) => {
+      const key = this._normalizeInterfaceName(entry.interface)
+      const meta = key ? metadataMap.get(key) : null
+      const prefixLength = this._prefixLengthFromNetmask(entry.netmask)
+      return {
+        ...entry,
+        prefixLength,
+        type: meta && meta.type ? meta.type : null,
+        operstate: meta && meta.operstate ? meta.operstate : null,
+        speed: typeof meta?.speed === 'number' ? meta.speed : null,
+        virtual: Boolean(meta && meta.virtual),
+        default: Boolean(meta && meta.default),
+        mac: entry.mac || (meta && meta.mac) || null
+      }
+    })
+  }
+  _normalizeInterfaceName(name) {
+    if (!name || typeof name !== 'string') {
+      return ''
+    }
+    return name.trim().toLowerCase()
+  }
   classifyAddress(address, isInternal = false) {
     if (!address || typeof address !== 'string') {
       return { scope: 'unknown', shareable: false }
@@ -684,6 +777,80 @@ class PeerDiscovery {
     }
     return { scope: 'public', shareable: true }
   }
+  _prefixLengthFromNetmask(netmask) {
+    if (!netmask || typeof netmask !== 'string') {
+      return null
+    }
+    const octets = this._parseIPv4(netmask)
+    if (!octets) {
+      return null
+    }
+    let bits = 0
+    for (const octet of octets) {
+      bits += this._countBits(octet)
+    }
+    return bits
+  }
+  _countBits(value) {
+    let count = 0
+    let v = value & 255
+    while (v) {
+      count += v & 1
+      v >>= 1
+    }
+    return count
+  }
+  // Heuristically rank interface candidates so physical LAN adapters win over VPN/tunnels
+  _scoreCandidate(entry) {
+    if (!entry || !entry.shareable) {
+      return -Infinity
+    }
+    let score = 0
+    switch (entry.scope) {
+      case 'lan':
+        score += 100
+        break
+      case 'cgnat':
+        score += 60
+        break
+      case 'public':
+        score += 40
+        break
+      default:
+        score -= 50
+        break
+    }
+    if (entry.default) {
+      score += 20
+    }
+    const type = entry.type ? entry.type.toLowerCase() : ''
+    if (type === 'wired') {
+      score += 25
+    } else if (type === 'wireless') {
+      score += 18
+    } else if (type === 'vpn') {
+      score -= 40
+    } else if (type === 'cellular') {
+      score += 5
+    }
+    if (entry.virtual) {
+      score -= 25
+    }
+    if (entry.operstate && entry.operstate.toLowerCase() === 'up') {
+      score += 5
+    } else if (entry.operstate) {
+      score -= 10
+    }
+    if (typeof entry.prefixLength === 'number') {
+      if (entry.prefixLength <= 24) {
+        score += 5
+      }
+      if (entry.prefixLength >= 30) {
+        score -= 20
+      }
+    }
+    return score
+  }
   _buildExternalHostEntries(externalPort) {
     if (!externalPort && externalPort !== 0) {
       return []
@@ -741,7 +908,7 @@ class PeerDiscovery {
     return entries
   }
   _broadcastTargets() {
-    const addresses = this._collectInterfaceAddresses()
+    const addresses = this._collectInterfaceAddressesSync()
     this.interface_addresses = addresses
     const targets = new Set()
     for (const entry of addresses) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.265.0",
+  "version": "3.271.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/container-tab-link.js

@@ -100,8 +100,6 @@
     }
 
     if (mobileButton) {
-      mobileButton.addEventListener('mouseover', () => showPopoverForAnchor(mobileButton, urlInput))
-      mobileButton.addEventListener('mouseout', (event) => handleMouseLeave(mobileButton, event))
       mobileButton.addEventListener('focus', () => showPopoverForAnchor(mobileButton, urlInput))
       mobileButton.addEventListener('blur', (event) => handleMouseLeave(mobileButton, event))
     }

package/server/public/style.css

@@ -1796,8 +1796,9 @@ body.dark .btn {
   background: rgba(0,0,0,0.8);
 }
 body.dark .swal2-popup {
-  background: var(--dark-btn-bg);
+  background: #090909;
   color: var(--dark-btn-color);
+  border: 5px solid rgba(255,255,255,0.2);
 }
 .swal2-popup {
   border-radius: 0px !important;
@@ -2586,6 +2587,18 @@ aside .qr {
   padding: 15px;
 }
 
+@media only screen and (max-width: 600px) {
+  aside .tab, aside .tab.submenu {
+    flex-direction: column !important;
+    padding: 10px 0 !important;
+  }
+  aside .caption {
+    width: 50px !important;
+    text-align: center !important;
+    word-wrap: break-word !important;
+    display: block !important;
+  }
+}
 
 @media only screen and (max-width: 768px) {
   /* Hide QR block on small screens */
@@ -2723,6 +2736,11 @@ body[data-agent='electron'] {
   padding-top: 26px;
 }
 */
+/*
+body:not([data-agent='electron']) #inspector {
+  display: none !important;
+}
+*/
 body.dark #dropdown-portal .dropdown-content {
   background: rgb(34, 34, 34);
 }

package/server/public/urldropdown.css

@@ -806,7 +806,9 @@ body.dark .urlbar input[type=url] {
 .mobile-link-button {
   background: rgba(0,0,0,0.05);
   padding: 5px;
+  /*
   flex-grow: 1;
+  */
   margin: 5px 0;
   border-radius: 10px;
 }
@@ -827,6 +829,9 @@ body.dark .urlbar input[type=url] {
   .mobile-link-button {
     display: block;
   }
+  .mobile-flexible {
+    flex-grow: 1;
+  }
 }
 .mobile-link-button {
   display: none;

package/server/views/agents.ejs

@@ -41,7 +41,6 @@ body.plugin-page aside .tab.selected {
   opacity: 1;
 }
 body.plugin-page aside .tab i {
-  width: 20px;
   text-align: center;
 }
 body.plugin-page .plugin-container {
@@ -52,7 +51,7 @@ body.plugin-page .plugin-container {
 body.plugin-page .btn-tab {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 5px;
 }
 body.plugin-page .btn-tab .btn {
   display: flex;
@@ -339,20 +338,29 @@ body.dark .plugin-option:hover {
   }
 }
 @media (max-width: 600px) {
+/*
   body.plugin-page main {
     flex-direction: column;
   }
+  */
   body.plugin-page aside {
     width: auto;
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
-    padding: 0 20px 20px;
+    gap: 0px;
+    padding: 0 10px;
+    flex-direction: column;
   }
-  body.plugin-page aside .tab,
   body.plugin-page aside .btn-tab {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+  body.plugin-page aside .tab {
     border-left: none;
     opacity: 1;
+    flex-direction: column;
+    padding: 10px;
+    margin: 0;
   }
   body.plugin-page aside .caption {
     display: none;
@@ -400,7 +408,7 @@ body.dark .plugin-option:hover {
    }) %>
 </head>
 <body class='<%=theme%> plugin-page' data-agent="<%=agent%>">
-<header class='grabbable'>
+<header class='navheader grabbable'>
 <h1>
 <a class='home' href="/home"><img class='icon' src="/pinokio-black.png" alt="Pinokio"></a>
 <button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
@@ -427,7 +435,7 @@ body.dark .plugin-option:hover {
 </h1>
 </header>
 <main class='plugin-main'>
-  <div class='plugin-container'>
+  <div class='plugin-container container'>
     <h1><i class="fa-solid fa-robot"></i>Agents</h1>
     <% const pluginCategories = pluginMenu.reduce((acc, pluginItem, index) => {
          const runs = Array.isArray(pluginItem.run) ? pluginItem.run : []
@@ -477,13 +485,6 @@ body.dark .plugin-option:hover {
                         <div class='subtitle'><%=pluginItem.description%></div>
                       <% } %>
                     </div>
-                    <div class='flexible'></div>
-                    <% if (pluginItem.link) { %>
-                      <button type='button' class='plugin-info' data-link="<%=pluginItem.link.replace(/"/g, '&quot;')%>" aria-label="Open info"><i class="fa-solid fa-circle-info"></i></button>
-                    <% } %>
-                    <div class='disclosure-indicator' aria-hidden="true">
-                      <i class="fa-solid fa-chevron-right"></i>
-                    </div>
                   </div>
                 <% }) %>
               </div>

package/server/views/app.ejs

@@ -3017,10 +3017,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         <%if (type==='browse') { %>
           <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn frame-link selected" data-index="10">
             <div class="tab">
-              <% if (config.icon) { %>
-                <img src="<%=config.icon%>" onerror="this.src='/pinokio-black.png'"/>
-              <% } %>
-              <div><%=config.title%></div>
+              <i class="fa-solid fa-bars"></i> Launchers
             </div>
           </a>
           

package/server/views/connect.ejs

@@ -481,10 +481,13 @@ body.dark .open-menu, body.dark .browse {
 }
 .grid-3 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns that wrap */
   gap: 1rem; /* Optional spacing between columns */
   padding: 10px;
 }
+.grid-3 > * {
+  min-width: 0;
+}
 .section-header .grid-1, .section-header .grid-2, .section-header .grid-3 {
   background: none !important;
   padding: 0 !important;
@@ -546,7 +549,6 @@ aside .selected {
 */
 .tab-content {
   width: 100%;
-  display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: 15px;
@@ -729,6 +731,7 @@ body.dark .profile td {
   padding:6px 10px;
   white-space: pre-wrap;
   background: rgba(0,0,0,0.04);
+  word-break: break-word;
 }
 .app-icon {
   width: 25px;
@@ -824,6 +827,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio'>

package/server/views/container.ejs

@@ -338,6 +338,7 @@ iframe {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio' value="<%=src%>">

package/server/views/index.ejs

@@ -437,6 +437,7 @@ body.dark aside .current.selected {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio'>

package/server/views/net.ejs

@@ -378,10 +378,20 @@ body.dark .open-menu, body.dark .browse {
 }
 .grid-3 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns that wrap */
   gap: 1rem; /* Optional spacing between columns */
   padding: 10px;
 }
+.grid-3 .section > h2 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+  font-size: 12px;
+}
+.grid-3 > * {
+  min-width: 0;
+}
 .section-header .grid-1, .section-header .grid-2, .section-header .grid-3 {
   background: none !important;
   padding: 0 !important;
@@ -653,6 +663,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
     <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
     <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+    <div class='mobile-flexible'></div>
     <form class='urlbar'>
       <div class='url-input-container'>
         <input type='url' placeholder='enter any local url to open in pinokio'>
@@ -686,25 +697,6 @@ document.addEventListener('DOMContentLoaded', function() {
   </form>
   <div class='running-apps'>
     <% if (current_host === host) { %>
-      <div class='section-header'>
-        <h3>
-          <div class='blank'></div>
-          <div class='col'>
-            <div class='grid-3'>
-              <div class='section'>
-                <h2><i class='fas fa-laptop-code'></i> This machine</h2>
-                <div>accessible from this machine</div>
-              </div>
-              <div class='section'>
-                <h2><i class="fa-solid fa-wifi"></i> Local network</h2><div>accessible from any machine on the local network</div>
-              </div>
-              <div class='section'>
-                <h2><i class="fa-solid fa-podcast"></i> Peer</h2><div>accessible from any pinokio peer on the local network</a></div>
-              </div>
-            </div>
-          </div>
-        </h3>
-      </div>
       <% processes.forEach((item, index) => { %>
         <div class='index line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.internal_router.join(' ')%> <%=item.port%>">
           <h3>
@@ -723,6 +715,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='title'><i class="fa-solid fa-circle"></i><span><%=item.title || item.name%></span></div>
               <div class='grid-3'>
                 <div class='section'>
+                  <h2><i class='fas fa-laptop-code'></i> This machine</h2>
                   <% 
                     let default_dns_name = ''
                     if (item.internal_router && item.internal_router.length > 0) {
@@ -755,6 +748,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   <% } %>
                 </div>
                 <div class='section'>
+                  <h2><i class="fa-solid fa-wifi"></i> Local network</h2>
                   <%
                     const directHosts = []
                     if (Array.isArray(item.external_hosts)) {
@@ -801,6 +795,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   <% } %>
                 </div>
                 <div class='section'>
+                  <h2><i class="fa-solid fa-podcast"></i> Peer</h2>
                   <% item.external_router.forEach((domain) => { %>
                     <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
                   <% }) %>
@@ -822,6 +817,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='title'><i class="fa-solid fa-circle"></i><span><%=route.name%></span></div>
               <div class='grid-3'>
                 <div class='section'>
+                  <h2><i class='fas fa-laptop-code'></i> This machine</h2>
                   <% route.internal_router.forEach((domain) => { %>
                     <% if (domain.endsWith(".localhost")) { %>
                       <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
@@ -831,11 +827,13 @@ document.addEventListener('DOMContentLoaded', function() {
                   <% }) %>
                 </div>
                 <div class='section'>
+                  <h2><i class="fa-solid fa-wifi"></i> Local network</h2>
                   <% if (route.external_ip) { %>
                     <a class='net' target="_blank" href="http://<%=route.external_ip%>">http://<%=route.external_ip%></a>
                   <% } %>
                 </div>
                 <div class='section'>
+                  <h2><i class="fa-solid fa-podcast"></i> Peer</h2>
                   <% route.external_router.forEach((domain) => { %>
                     <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
                   <% }) %>

package/server/views/network.ejs

@@ -444,10 +444,13 @@ body.dark .desc {
 }
 .grid-3 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns that wrap */
   gap: 1rem; /* Optional spacing between columns */
   padding: 10px;
 }
+.grid-3 > * {
+  min-width: 0;
+}
 .section-header .grid-1, .section-header .grid-2, .section-header .grid-3 {
   background: none !important;
   padding: 0 !important;
@@ -1015,6 +1018,25 @@ body.dark .troubleshoot {
   header .flexible {
     min-width: unset;
   }
+  .config-body {
+    flex-direction: column;
+    gap: 20px;
+  }
+  .config-row {
+    width: 100%;
+    padding-right: 0;
+  }
+  .network-name {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .network-name input[type=text] {
+    width: 100%;
+  }
+  .network-name .btn {
+    width: 100%;
+  }
 }
 
 @media only screen and (max-width: 480px) {
@@ -1060,6 +1082,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio'>

package/server/views/screenshots.ejs

@@ -717,6 +717,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio'>

package/server/views/settings.ejs

@@ -389,6 +389,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio'>

package/server/views/tools.ejs

@@ -971,6 +971,15 @@ aside .selected {
   opacity: 1;
 }
 @media only screen and (max-width: 600px) {
+  .bundle-header {
+    display: block;
+  }
+  .bundle-status {
+    margin-top: 10px;
+  }
+  .bundles-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
   aside {
     width: unset;
     flex-shrink: unset;
@@ -1107,6 +1116,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
+<div class='mobile-flexible'></div>
 <form class='urlbar'>
   <div class='url-input-container'>
     <input type='url' placeholder='enter any local url to open in pinokio'>