Fix inconsistent Turbo Frame indentation

Author: leonvogt

public/styles/panel/main.css

@@ -255,8 +255,25 @@ button.action-icon:active svg {
   --minimum-base-padding: 0.5rem;
   padding-left: calc(var(--depth, 0) * var(--indent-size) + var(--minimum-base-padding));
 }
-.entry-row.leaf-node {
-  --indent-size: 1.5rem;
+/* Tree row layout for turbo frame pane */
+.entry-row.tree-row {
+  --tree-indent-size: 1rem;
+  --tree-toggle-width: 1.25rem;
+  padding-left: 0.25rem;
+  border-left: 3px solid transparent;
+}
+
+.tree-indent {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tree-toggle-width);
+  flex-shrink: 0;
 }
 .entry-row.detail-sub-row {
   padding-left: calc(var(--depth, 1) * 1rem + 0.5rem);
@@ -288,6 +305,9 @@ button.action-icon:active svg {
   background-color: var(--wa-color-brand-fill-normal);
   border-left: 3px solid var(--wa-color-brand-fill-loud);
 }
+.entry-row.tree-row.selected {
+  border-left-color: var(--wa-color-brand-fill-loud);
+}
 
 .entry-row .btn-hoverable {
   opacity: 0;

src/browser_panel/panel/tabs/TurboTab.svelte

@@ -328,14 +328,10 @@
       {@const selector = `#${frame.id}`}
       {@const hasChildren = frame.children && frame.children.length > 0}
       {@const isCollapsed = collapsedFrames[frame.uuid] || false}
-      {@const isLeafNode = !hasChildren && depth > 0}
-
       <div
-        class="d-flex justify-content-between align-items-center cursor-pointer entry-row"
+        class="d-flex justify-content-between align-items-center cursor-pointer entry-row tree-row"
         class:selected={selected.type === SELECTABLE_TYPES.TURBO_FRAME && selected.frame.id === frame.id}
         class:with-children={hasChildren}
-        class:leaf-node={isLeafNode}
-        class:ps-0={hasChildren && depth === 0}
         role="button"
         tabindex="0"
         style="--depth: {depth}"
@@ -346,9 +342,12 @@
         onmouseleave={() => hideHighlightOverlay()}
       >
         <div class="d-flex align-items-center">
-          {#if hasChildren}
-            <IconButton class="collapse-icon {isCollapsed ? 'rotated' : ''}" name="chevron-down" onclick={(event) => collapseEntryRows(frame.uuid, event, collapsedFrames, stickyFrames)}></IconButton>
-          {/if}
+          <span class="tree-indent" style="width: calc(var(--depth) * var(--tree-indent-size))"></span>
+          <span class="tree-toggle">
+            {#if hasChildren}
+              <IconButton class="collapse-icon {isCollapsed ? 'rotated' : ''}" name="chevron-down" onclick={(event) => collapseEntryRows(frame.uuid, event, collapsedFrames, stickyFrames)}></IconButton>
+            {/if}
+          </span>
           <StripedHtmlTag element={frame} />
           {#if !frame.hasUniqueId}
             <wa-tooltip for={`unique-id-warning-icon-${frame.uuid}`}>Warning: Multiple &lt;turbo-frame&gt; elements share the same ID</wa-tooltip>