diff --git a/src/renderer/components/MenuEditorView/MenuEditorView.tsx b/src/renderer/components/MenuEditorView/MenuEditorView.tsx index 61a6b6d..a0b5252 100644 --- a/src/renderer/components/MenuEditorView/MenuEditorView.tsx +++ b/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} diff --git a/src/renderer/components/PageInput/PageInput.css b/src/renderer/components/PageInput/PageInput.css new file mode 100644 index 0000000..9d65f89 --- /dev/null +++ b/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; +} diff --git a/src/renderer/components/PageInput/PageInput.tsx b/src/renderer/components/PageInput/PageInput.tsx index e990832..eb4b1cb 100644 --- a/src/renderer/components/PageInput/PageInput.tsx +++ b/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 = ({ @@ -20,6 +22,7 @@ export const PageInput: React.FC = ({ 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 = ({ return (
-
+
{ diff --git a/tests/renderer/components/MenuEditorView.test.tsx b/tests/renderer/components/MenuEditorView.test.tsx index 9961634..36fb92c 100644 --- a/tests/renderer/components/MenuEditorView.test.tsx +++ b/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 () => {