Fix huge performance loss on extended lines

butterfly/__about__.py

@@ -1,5 +1,5 @@
 __title__ = "butterfly"
-__version__ = "3.0.2"
+__version__ = "3.0.3"
 
 __summary__ = "A sleek web based terminal emulator"
 __uri__ = "https://github.com/paradoxxxzero/butterfly"

butterfly/sass/_layout.sass

@@ -36,11 +36,12 @@ body
     background-color: $active-bg
 
   .line.extended
-    overflow-x: auto
-    overflow-x: overlay
     cursor: zoom-in
     background-image: linear-gradient(90deg, rgba(darken($bg, 3%), 0), 95%, darken($bg, 3%))
 
+    .extra
+      display: none
+
     &:not(.expanded):hover
       background-color: lighten($bg, 2%)
 
@@ -50,18 +51,6 @@ body
 
       .extra
         display: block
-        white-space: pre-line
-        word-break: break-all
-
-    &::-webkit-scrollbar
-      background: rgba($scroll-bg, .1)
-      height: 0
-
-    &::-webkit-scrollbar-thumb
-      background: rgba($scroll-fg, .1)
-
-    &::-webkit-scrollbar-thumb:hover
-      background: rgba($scroll-fg-hover, .1)
 
   &::-webkit-scrollbar
     background: $scroll-bg

butterfly/static/main.css

@@ -2817,26 +2817,17 @@ body {
   body .line.active {
     background-color: transparent; }
   body .line.extended {
-    overflow-x: auto;
-    overflow-x: overlay;
     cursor: zoom-in;
     background-image: linear-gradient(90deg, rgba(9, 8, 10, 0), 95%, #09080a); }
+    body .line.extended .extra {
+      display: none; }
     body .line.extended:not(.expanded):hover {
       background-color: #161419; }
     body .line.extended.expanded {
       cursor: zoom-out;
       background-color: #09080a; }
       body .line.extended.expanded .extra {
-        display: block;
-        white-space: pre-line;
-        word-break: break-all; }
-    body .line.extended::-webkit-scrollbar {
-      background: rgba(17, 15, 19, 0.1);
-      height: 0; }
-    body .line.extended::-webkit-scrollbar-thumb {
-      background: rgba(244, 234, 213, 0.1); }
-    body .line.extended::-webkit-scrollbar-thumb:hover {
-      background: rgba(244, 234, 213, 0.1); }
+        display: block; }
   body::-webkit-scrollbar {
     background: #110f13;
     width: 0.75em; }