fix: getting much closer to my idea

src/renderer/components/MenuEditorView/MenuEditorView.tsx

@@ -596,6 +596,7 @@ export const MenuEditorView: React.FC = () => {
                             placeholder={tr('menuEditor.newEntryPlaceholder')}
                             disabled={isLoadingPages}
                             autoFocus
+                            inlinePlain
                           />
                         ) : node.data.title}
                       </span>

src/renderer/components/PageInput/PageInput.css

@@ -0,0 +1,18 @@
+.page-input-wrapper-inline {
+  padding: 0;
+  min-height: 0;
+  border: none;
+  background: transparent;
+  gap: 0;
+}
+
+.page-input-wrapper-inline:focus-within {
+  border: none;
+  outline: none;
+}
+
+.page-input-field-inline {
+  min-width: 0;
+  padding: 0;
+  line-height: 1.25;
+}

src/renderer/components/PageInput/PageInput.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { PostData } from '../../../main/shared/electronApi';
 import '../TagInput/TagInput.css';
+import './PageInput.css';
 
 interface PageInputProps {
   pages: PostData[];
@@ -10,6 +11,7 @@ interface PageInputProps {
   createSubmenuLabel: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  inlinePlain?: boolean;
 }
 
 export const PageInput: React.FC<PageInputProps> = ({
@@ -20,6 +22,7 @@ export const PageInput: React.FC<PageInputProps> = ({
   createSubmenuLabel,
   disabled = false,
   autoFocus = false,
+  inlinePlain = false,
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [showSuggestions, setShowSuggestions] = useState(false);
@@ -127,11 +130,11 @@ export const PageInput: React.FC<PageInputProps> = ({
 
   return (
     <div className="tag-input-container" ref={containerRef}>
-      <div className="tag-input-wrapper">
+      <div className={`tag-input-wrapper ${inlinePlain ? 'page-input-wrapper-inline' : ''}`}>
         <input
           ref={inputRef}
           type="text"
-          className="tag-input-field"
+          className={`tag-input-field ${inlinePlain ? 'page-input-field-inline' : ''}`}
           value={inputValue}
           autoFocus={autoFocus}
           onChange={(event) => {

tests/renderer/components/MenuEditorView.test.tsx

@@ -59,6 +59,10 @@ describe('MenuEditorView entry editor', () => {
     fireEvent.input(input, { target: { value: 'ab' } });
     const suggestion = await screen.findByRole('button', { name: /^about$/i });
     expect(suggestion.className).toContain('tag-suggestion');
+
+    const wrapper = input.closest('.tag-input-wrapper');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.className).toContain('page-input-wrapper-inline');
   });
 
   it('focuses the new in-row page input immediately after creating an entry', async () => {