Fix display on iOS by not relying on default button padding

components/header.js

@@ -77,8 +77,8 @@ export class Header extends HTMLElement {
       :host {
         background: #111;
         color: #ddd;
-        display: flex;
-        flex-direction: row;
+        display: grid;
+        grid-template-columns: min-content min-content 1fr min-content min-content;
         padding: 0 4px;
       }
       button {
@@ -86,10 +86,7 @@ export class Header extends HTMLElement {
         background: inherit;
         color: inherit;
         font-size: 30px;
-        width: 32px;
-      }
-      div.divider {
-        flex-grow: 1;
+        padding: 0 8px;
       }
       div.menu {
         position: fixed;
@@ -230,26 +227,21 @@ export class Header extends HTMLElement {
       const confirmBtn = document.createElement('button')
       confirmBtn.innerText = this.text.rename
       confirmBtn.style.marginLeft = '3px'
-      let errorEl
       confirmBtn.addEventListener('click', () => {
         const newPath = input.value
-        const v = localStorage.getItem(newPath)
-        if (v !== null || newPath === this.path) {
-          if (!errorEl) {
-            errorEl = document.createElement('p')
-            errorEl.style.color = 'red'
-            errorEl.innerText = this.text.alreadyExists
-            dialog.bodyEl.appendChild(errorEl)
-          }
+        const exists = localStorage.getItem(newPath)
+        if (exists ?? true === true) {
           return
         }
-        localStorage.setItem(
-          newPath,
-          localStorage.getItem(this.path)
-        )
-        localStorage.removeItem(this.path)
-        dialog.close()
-        location.hash = newPath
+        if (newPath !== this.path) {
+          localStorage.setItem(
+            newPath,
+            localStorage.getItem(this.path)
+          )
+          localStorage.removeItem(this.path)
+          dialog.close()
+          vlocation.hash = newPath
+        }
       })
       dialog.footerEl.replaceChildren(
         cancelBtn, confirmBtn
@@ -274,7 +266,7 @@ export class Header extends HTMLElement {
       confirmBtn.style.marginLeft = '3px'
       confirmBtn.addEventListener('click', () => {
         localStorage.removeItem(this.path)
-        location.hash = '/'
+        vlocation.hash = '/'
         dialog.close()
       })
       dialog.footerEl.replaceChildren(
@@ -338,8 +330,15 @@ export class Header extends HTMLElement {
     confirmBtn.style.marginLeft = '3px'
     confirmBtn.addEventListener('click', () => {
       const newPath = this.encodePath(input.value)
-      location.hash = newPath
+      const exists = localStorage.getItem(newPath)
+      if (exists ?? true === true) {
+        return
+      }
+      if (newPath !== this.path) {
+        localStorage.setItem(newPath, '')
+      }
       dialog.close()
+      vlocation.hash = newPath
     })
     dialog.footerEl.replaceChildren(
       cancelBtn, confirmBtn