Make keyboard navigation instructions correct size with new scrolling

Author: WebCoder49

code-input.css

@@ -152,12 +152,8 @@ Sticks to the top of the code-input element */
 code-input .code-input_dialog-container {
   z-index: 2;
 
-  position: sticky;
   grid-row: 1;
   grid-column: 1;
-  
-  top: 0;
-  left: 0;
 
   margin: 0;
   padding: 0;
@@ -167,6 +163,10 @@ 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));
+}
+
 [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
   left: unset;
   right: 0;
@@ -192,6 +192,7 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
   overflow: hidden;
   text-overflow: ellipsis;
   width: calc(100% - 12px);
+  box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors. */
   max-height: 3em;
 }
 code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {

plugins/prism-line-numbers.css

@@ -14,8 +14,3 @@ 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))));
 }
-
-/* Make keyboard navigation still fill width */
-code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
-  width: calc(100% + max(3.8em, var(--padding, 16px)))!important;
-}