Make dialog container be correct width no matter box sizing; Simplify CSS

Author: WebCoder49

code-input.css

@@ -40,9 +40,8 @@ code-input {
   grid-template-rows: 100%;
 }
 
-
-code-input:not(.code-input_loaded) {
-  padding: var(--padding, 16px)!important;
+code-input * {
+  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. */
 }
 
 code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
@@ -52,7 +51,6 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   border: 0;
   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;
   grid-row: 1;
@@ -138,37 +136,6 @@ code-input:has(textarea:focus):not(.code-input_mouse-focused) {
   outline: 2px solid currentColor;
 }
 
-/* Before registering give a hint about how to register. */
-code-input:not(.code-input_registered) {
-  overflow: hidden;
-  display: block;
-  box-sizing: border-box; /* Include padding in width/height */
-}
-
-code-input:not(.code-input_registered)::after {
-  /* Display message to register */
-  content: "No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate has not been called.";
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: var(--padding, 16px);
-  width: calc(100% - 2 * var(--padding, 16px));
-  overflow-x: auto;
-
-  border-top: 1px solid currentColor;
-  outline-top: 0;
-  background-color: inherit;
-  color: inherit;
-
-  margin: 0;
-  padding: 0;
-  height: 2em;
-}
-
-code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([data-code-input-fallback]) {
-  opacity: 0;
-}
-
 /* Contains dialog boxes that might appear as the result of a plugin.
 Sticks to the top of the code-input element */
 
@@ -190,9 +157,6 @@ code-input .code-input_dialog-container {
   /* 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));
-}
 
 [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
   left: unset;
@@ -216,12 +180,12 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
   padding-right: var(--padding, 16px);
   margin: 0;
   text-wrap: balance;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   width: 100%;
   box-sizing: border-box;
-  max-height: 3em;
+  height: 3em;
 }
 
 code-input:not(:has(textarea:not([data-code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
@@ -239,6 +203,40 @@ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(tex
   min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
 }
 
+/* Pre-loaded appearance */
+
+code-input:not(.code-input_loaded) {
+  padding: var(--padding, 16px)!important;
+  overflow: hidden;
+  display: block;
+  box-sizing: border-box; /* Include padding in width/height */
+}
+
+code-input:not(.code-input_loaded)::after {
+  /* Display message to register */
+  content: "No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate has not been called.";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: var(--padding, 16px);
+  width: calc(100% - 2 * var(--padding, 1.6px));
+  overflow-x: auto;
+
+  border-top: 1px solid currentColor;
+  outline-top: 0;
+  background-color: inherit;
+  color: inherit;
+
+  margin: 0;
+  padding: 0;
+  height: 2em;
+}
+
+
+code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([data-code-input-fallback]) {
+  opacity: 0;
+}
+
 /* No JavaScript fallback - styles to override all previous */
 
 code-input:has(textarea[data-code-input-fallback]) {

plugins/prism-line-numbers.css

@@ -14,6 +14,11 @@ code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element
 code-input.line-numbers, .line-numbers code-input {
   grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
 }
+/* Despite the above, keep dialog container full width */
+code-input.line-numbers .code-input_dialog-container, .line-numbers code-input .code-input_dialog-container {
+  width: calc(100% + max(0em, calc(3.8em - var(--padding, 16px))));
+}
+
 
 /* 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 {

tests/i18n.html

@@ -46,6 +46,11 @@
 
     </head>
     <body>
+        <style>
+            * {
+                box-sizing: border-box;
+            }
+        </style>
         <textarea dir="rtl" placeholder="textarea rtl"></textarea>
         <textarea dir="ltr" placeholder="textarea ltr"></textarea>
         <code-input dir="rtl" template="prism" language="markdown"><textarea data-code-input-fallback placeholder="prism rtl"></textarea></code-input>