Merge pull request #1038 from hgiesel/imgmaxwidth

Fix scrollbar issue in anki-editable component in two ways

qt/aqt/data/web/css/webview.scss

@@ -2,7 +2,8 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @use 'ts/sass/core';
-@use 'buttons';
+@use 'ts/sass/scrollbar';
+@use 'ts/sass/buttons';
 
 // core.scss sets border-box, but we need to
 // keep the old behaviour for now to avoid breaking
@@ -20,29 +21,6 @@ h1 {
   margin-bottom: 0.2em;
 }
 
-body.nightMode {
-  &::-webkit-scrollbar {
-    background: var(--window-bg);
-
-    &:horizontal {
-      height: 12px;
-    }
-
-    &:vertical {
-      width: 12px;
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: buttons.$fusion-button-hover-bg;
-    border-radius: 8px;
-
-    &:horizontal {
-      min-width: 50px;
-    }
-
-    &:vertical {
-      min-height: 50px;
-    }
-  }
+.nightMode {
+    @include scrollbar.night-mode;
 }

ts/editor/editable.scss

@@ -1,3 +1,5 @@
+@use 'ts/sass/scrollbar';
+
 anki-editable {
     display: block;
     overflow-wrap: break-word;
@@ -8,16 +10,20 @@ anki-editable {
         content: "\a";
         white-space: pre;
     }
+
+    * {
+        max-width: 100%;
+    }
 }
 
-img {
-    max-width: 100%;
+:host-context(.nightMode) * {
+    @include scrollbar.night-mode;
+}
 
-    &.drawing {
+img.drawing {
     zoom: 50%;
 
     .nightMode & {
         filter: unquote("invert() hue-rotate(180deg)");
     }
-    }
 }

ts/sass/scrollbar.scss

@@ -0,0 +1,32 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+@use 'vars';
+@use 'buttons';
+
+@mixin night-mode {
+  &::-webkit-scrollbar {
+    background: var(--window-bg);
+
+    &:horizontal {
+      height: 12px;
+    }
+
+    &:vertical {
+      width: 12px;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: buttons.$fusion-button-hover-bg;
+    border-radius: 8px;
+
+    &:horizontal {
+      min-width: 50px;
+    }
+
+    &:vertical {
+      min-height: 50px;
+    }
+  }
+}