Merge pull request #163 from WebCoder49/sizing-with-v2-scroll

Sizing with v2 scroll

Author: WebCoder49

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);
 }

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;

tests/i18n.html

@@ -7,7 +7,7 @@
 
         <!--Import Prism-->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">