Fix - Sandpack error icon overlapping issue (#4332)

* position error icon correctly

Add padding right to line with the error to accommodate space for the error icon.
Added in a new selector because it was getting overridden by more specific selectors.
Fixes #4287

* use important instead of selectors

* fix overlapping for smaller screens

* replace width with min-width

* align error icon to center vertically

Use em instead of pixels for padding, increase line height of error icon

Author: imanpalsingh

beta/src/styles/sandpack.css

@@ -90,6 +90,9 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 .sp-code-editor .cm-errorLine {
   background-color: rgba(255, 107, 99, 0.1);
   position: relative;
+  padding-right: 2em !important;
+  display: inline-block;
+  min-width: 100%;
 }
 
 .sp-code-editor .cm-errorLine:after {
@@ -98,7 +101,7 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
   top: 0;
   content: '\26A0';
   font-size: 22px;
-  line-height: 16px;
+  line-height: 20px;
   color: #ff3d3d;
 }