From 92d5f052c3b3d1b6492b6137146c28ccf735d123 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Sun, 27 Jul 2025 17:33:25 +0100 Subject: [PATCH 1/2] Make sizes work better with code-input scrolling (#148) --- code-input.css | 25 +++++++++++++++---------- plugins/prism-line-numbers.css | 7 +------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/code-input.css b/code-input.css index a5fd92a..c3ac631 100644 --- a/code-input.css +++ b/code-input.css @@ -38,8 +38,8 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co margin: 0px!important; padding: var(--padding, 16px)!important; border: 0; - min-width: calc(100% - var(--padding) * 2); - min-height: calc(100% - var(--padding) * 2); + min-width: calc(100% - var(--padding, 16px) * 2); + min-height: calc(100% - var(--padding, 16px) * 2); box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */ overflow: hidden; resize: none; @@ -57,8 +57,6 @@ code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-el /* Remove all margin and padding from others */ margin: 0px!important; padding: 0px!important; - width: 100%; - height: 100%; } code-input textarea, code-input pre, code-input pre * { @@ -139,12 +137,12 @@ code-input:not(.code-input_registered)::after { content: "Use codeInput.registerTemplate to set up."; display: block; position: absolute; - bottom: var(--padding); - left: var(--padding); - width: calc(100% - 2 * var(--padding)); + bottom: var(--padding, 16px); + left: var(--padding, 16px); + width: calc(100% - 2 * var(--padding, 16px)); border-top: 1px solid grey; - outline: var(--padding) solid white; + outline: var(--padding, 16px) solid white; background-color: white; } @@ -167,12 +165,16 @@ code-input .code-input_dialog-container { margin: 0; padding: 0; - width: 100%; height: 0; + width: 100%; /* Dialog boxes' text is based on text-direction */ text-align: inherit; } +code-input.code-input_pre-element-styled .code-input_dialog-container { + width: calc(100% + 2 * var(--padding, 16px) - 2px); +} + [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container { left: unset; right: 0; @@ -212,5 +214,8 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre { - padding-top: calc(var(--padding) + 3em)!important; + padding-top: calc(var(--padding, 16px) + 3em)!important; +} +code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre { + min-height: calc(100% - var(--padding, 16px) * 2 - 3em); } diff --git a/plugins/prism-line-numbers.css b/plugins/prism-line-numbers.css index 3542034..e8c4c0c 100644 --- a/plugins/prism-line-numbers.css +++ b/plugins/prism-line-numbers.css @@ -4,7 +4,7 @@ * https://prismjs.com/plugins/line-numbers/ * Files: prism-line-numbers.css */ -/* Update padding to match line-numbers plugin */ +/* Update padding to match line-numbers plugin, and decrease width likewise */ code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre, .line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre { padding-left: max(3.8em, var(--padding, 16px))!important; @@ -15,11 +15,6 @@ code-input.line-numbers, .line-numbers code-input { grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px)))); } -/* Make keyboard navigation still fill width */ -code-input.line-numbers .code-input_dialog-container .code-input_keyboard-navigation-instructions, .line-numbers code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions { - width: calc(100% + max(3.8em, var(--padding, 16px)))!important; -} - /* Override Prism styles so there's no display:inline, relatively-positioned code element which breaks offsetTop, used in FindAndReplace, in Firefox. */ code-input pre[class*=language-].line-numbers>code { position: static; From 5987088be192124cdccc06032ee1b0692d1744c0 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Mon, 28 Jul 2025 18:37:05 +0100 Subject: [PATCH 2/2] Prevent Prism.js and highlight.js automatic highlighting interfering in i18n test --- tests/i18n.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/i18n.html b/tests/i18n.html index b8d4f7f..bc3a6ca 100644 --- a/tests/i18n.html +++ b/tests/i18n.html @@ -7,7 +7,7 @@ - +