Adjust app layout

assets/style.css

@@ -115,7 +115,7 @@ header {
     padding: var(--space-3) var(--space-4);
     border-bottom: var(--border-dashed);
     display: grid;
-    grid-template-columns: 1fr minmax(0, auto) 1fr;
+    grid-template-columns: 1fr minmax(0, 60rem) 1fr;
     grid-template-areas: "crumbs search actions";
     align-items: center;
     gap: var(--space-2);
@@ -131,13 +131,6 @@ footer {
 .breadcrumb { grid-area: crumbs; gap: var(--space-1); min-width: 0; }
 .header-actions { grid-area: actions; justify-content: flex-end; flex-wrap: wrap; }
 .logo { width: 1.1em; height: 1.1em; vertical-align: center; }
-.nav-up {
-    display: inline-flex;
-    align-items: center;
-    color: var(--secondary);
-    padding: 0 var(--space-1);
-}
-.nav-up:hover { color: var(--primary-hover); }
 
 /* === Panel ===
    Bordered container recipe shared by listings, sidebar widgets, the tree
@@ -409,8 +402,8 @@ body.edit-mode .page-wrap { grid-template-columns: minmax(0, 1fr); max-width: no
     gap: var(--space-1);
     position: relative;
     justify-self: center;
-    width: 24rem;
-    max-width: 100%;
+    width: 100%;
+    max-width: 40rem;
 }
 .search-input { font-size: 0.9rem; }
 .search-card {
@@ -516,12 +509,23 @@ button.fab { display: none; }
     flex-direction: column;
     gap: var(--space-4);
     padding-top: 1rem;
+    /* Mirror the left tree rail: a dashed separator to main, no panel outlines
+       on the widgets within (see .panel-sidebar). */
+    padding-left: var(--space-2);
+    border-left: var(--border-dashed);
 }
 aside.sidebar:empty { display: none; }
 
 /* Density modifier for panels in the sidebar (smaller font, tighter padding).
-   The .panel class applied alongside provides the border + background. */
-.panel-sidebar { padding: var(--space-2) var(--space-3); font-size: var(--font-sm); }
+   Drops the .panel outline so the rail reads as a clean column separated from
+   main by the .sidebar dashed border, matching the left tree rail. The mobile
+   drawer re-adds a full border + bg (see responsive block) so it stays legible
+   floating over content. */
+.panel-sidebar {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-sm);
+    border: none;
+}
 .actions { display: flex; flex-direction: column; gap: 0.15rem; }
 
 /* === Table of contents (floating variant) ===
@@ -725,8 +729,8 @@ aside.tree-sidebar:empty { display: none; }
 /* === Responsive === */
 @media (max-width: 1100px) {
     .page-wrap { grid-template-columns: 1fr; }
-    /* Single-row mobile header: logo + Up icon are compact so search can
-       take the middle flex column, with actions on the right. */
+    /* Single-row mobile header: the compact logo sits left so search can take
+       the middle flex column, with actions on the right. */
     header { grid-template-columns: auto 1fr auto; }
     /* Mobile view mode: header scrolls away with the page (out of scope to
        stick it). It re-sticks only in edit mode so SAVE/CANCEL stay reachable
@@ -735,7 +739,9 @@ aside.tree-sidebar:empty { display: none; }
     body.edit-mode header { position: sticky; top: 0; }
     .search-form { width: 100%; max-width: none; justify-self: stretch; }
     /* Sidebar on mobile is a floating overlay toggled by the FAB. The aside
-       itself is the scroll container; children render at natural height. */
+       itself is the scroll container; children render at natural height. The
+       full border + bg replace the per-panel outlines dropped on desktop so the
+       drawer stays legible floating over content. */
     .sidebar {
         position: fixed;
         bottom: 5rem;
@@ -748,6 +754,9 @@ aside.tree-sidebar:empty { display: none; }
         overflow-y: auto;
         display: none;
         z-index: 60;
+        padding: var(--space-2);
+        border: var(--border);
+        background: var(--bg);
     }
     .sidebar.is-open { display: flex; }
     button.fab { display: inline-flex; }
@@ -782,6 +791,7 @@ aside.tree-sidebar:empty { display: none; }
 @media (max-width: 600px) {
     header, footer { padding: var(--space-2) var(--space-3); }
     main { padding: var(--space-4) var(--space-3); }
+    .app-name {display: none;}
     .editor-cm { min-height: 50vh; }
     .sidebar { width: calc(100% - 1.5rem); }
     /* Editing on mobile is full-bleed: drop the page/main inset so the toolbar