fix: admin/config: text overflowing on lg+ layouts
Massimo Melina committed
Dec 20, 2025 at 00:07 UTC
ca34316f319730b5bf9c942d1bcd66e816914e5f
2 files changed
+16
-15
admin/src/ConfigFilePage.ts
+14
-13
@@ -41,19 +41,20 @@ export default function ConfigFilePage() {
41
}, "Edit"),
42
h(Box, { flex: 1, minWidth: 'fit-content' }, h(DisplayField, { label: "File path", value: data?.fullPath, size: 'small' }))
43
),
44
- element || text !== undefined && // avoids bad undo behaviour on start
45
- h(KeepInScreen, { margin: 10 }, h(TextEditor, {
46
- value: text,
47
- disabled: !edit,
48
- style: { background: '#8881' },
49
- onValueChange: setText,
50
- onKeyDown(ev) {
51
- if (['s','Enter'].includes(isCtrlKey(ev) as any)) {
52
- void save()
53
- ev.preventDefault()
54
- }
55
- },
56
- })),
44
+ element || text !== undefined && // avoids bad undo behavior on start
45
+ h(Box, { sx: { '& pre,& textarea': { wordBreak: 'break-all !important' } } }, // fixes long lines not wrapping at the right point when the side menu is visible
46
+ h(KeepInScreen, { margin: 10 }, h(TextEditor, {
47
+ value: text,
48
+ disabled: !edit,
49
+ style: { background: '#8881' },
50
+ onValueChange: setText,
51
+ onKeyDown(ev) {
52
+ if (['s','Enter'].includes(isCtrlKey(ev) as any)) {
53
+ void save()
54
+ ev.preventDefault()
55
+ }
56
+ },
57
+ }))),
58
)
59
60
function save() {
admin/src/TextEditor.ts
+2
-2
@@ -15,8 +15,8 @@ import 'prismjs/themes/prism-solarizedlight.css' // looks good both with light a
15
type OP = ComponentProps<typeof Editor>
16
type Already = 'highlight' | 'padding' | 'tabSize' | 'insertSpaces' | 'ignoreTabKey'
17
type TextEditorProps = Omit<OP, Already> & Partial<Pick<OP, Already>> & { lang?: 'plain' | 'js' | 'html' | 'css' | 'json' | 'yaml' }
18
-export const TextEditor = forwardRef(({ style, lang='plain', ...props }: TextEditorProps, ref) => h(Editor, {
19
- // Editor component doesn't seem to support ref, but I didn't cause any problem yet
18
+export const TextEditor = forwardRef(({ style, lang='plain', ...props }: TextEditorProps, _ref) => h(Editor, {
19
+ // Editor component doesn't seem to support ref, but it didn't cause any problem yet
20
highlight: s => highlight(s, languages[lang], lang),
21
padding: 10,
22
tabSize: 4,