js-draw 1.31.1 → 1.33.0

package/dist/mjs/localizations/de.mjs

@@ -2,116 +2,194 @@ import  { defaultEditorLocalization }  from '../localization.mjs';
 // German localization
 const localization = {
     ...defaultEditorLocalization,
+    help: 'Hilfe',
+    helpHidden: 'Hilfe ausgeblendet',
+    next: 'Weiter',
+    previous: 'Zurück',
+    close: 'Schließen',
+    helpScreenNavigationHelp: 'Auf ein Steuerelement klicken, um weitere Informationen zu erhalten.',
+    helpControlsAccessibilityLabel: 'Steuerelemente: Aktiviere ein Steuerelement, um Hilfe anzuzeigen.',
     pen: 'Stift',
     eraser: 'Radierer',
     select: 'Auswahl',
     handTool: 'Verschieben',
     zoom: 'Vergrößerung',
     image: 'Bild',
-    inputAltText: 'Alt-Text: ',
-    chooseFile: 'Wähle Datei: ',
+    reformatSelection: 'Formatauswahl',
+    inputAltText: 'Alt-Text:',
+    decreaseImageSize: 'Verkleinern',
+    resetImage: 'Zurücksetzen',
+    chooseFile: 'Datei wählen',
+    dragAndDropHereOrBrowse: 'Hierher ziehen\noder\n{{Durchsuchen}}',
     submit: 'Absenden',
+    addAll: 'Alle hinzufügen',
     cancel: 'Abbrechen',
     resetView: 'Ansicht zurücksetzen',
-    thicknessLabel: 'Dicke: ',
-    colorLabel: 'Farbe: ',
-    fontLabel: 'Schriftart: ',
-    textSize: 'Größe: ',
+    thicknessLabel: 'Dicke:',
+    colorLabel: 'Farbe:',
+    fontLabel: 'Schriftart:',
+    textSize: 'Größe:',
     resizeImageToSelection: 'Bildgröße an Auswahl anpassen',
     deleteSelection: 'Auswahl löschen',
     duplicateSelection: 'Auswahl duplizieren',
+    exit: 'Beenden',
+    save: 'Speichern',
     undo: 'Rückgängig',
     redo: 'Wiederholen',
+    fullStrokeEraser: 'Vollständiger Radierer',
+    selectPenType: 'Stiftstil:',
+    selectShape: 'Form',
     pickColorFromScreen: 'Farbe von Bildschirm auswählen',
     clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen',
-    selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.',
-    touchPanning: 'Ansicht mit Touchscreen verschieben',
-    anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
-    selectPenType: 'Objekt-Typ: ',
-    roundedTipPen: 'Freihand',
-    flatTipPen: 'Stift (druckempfindlich)',
+    colorSelectionCanceledAnnouncement: 'Farbauswahl abgebrochen',
+    selectionTool__lassoSelect: 'Freihand-Auswahl',
+    selectionTool__lassoSelect__help: 'Wenn diese Option aktiviert ist, wird durch Ziehen eine Freiformauswahl (Lasso) erstellt.',
+    selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben, und die Kleinbuchstaben/Großbuchstaben „i“ und „o“, um die Größe zu ändern.',
+    documentProperties: 'Seite',
+    backgroundColor: 'Hintergrundfarbe:',
+    imageWidthOption: 'Breite:',
+    imageHeightOption: 'Höhe:',
+    useGridOption: 'Gitter:',
+    enableAutoresizeOption: 'Automatische Größenanpassung',
+    toggleOverflow: 'Mehr',
+    about: 'Über',
+    inputStabilization: 'Stabilisierung',
+    strokeAutocorrect: 'Autokorrektur',
+    pressureSensitivity: 'Druck',
+    touchPanning: 'Mit Touch verschieben',
+    roundedTipPen: 'Rund',
+    roundedTipPen2: 'Polylinie',
+    flatTipPen: 'Flach',
     arrowPen: 'Pfeil',
     linePen: 'Linie',
-    outlinedRectanglePen: 'Umrissenes Rechteck',
+    outlinedRectanglePen: 'Umrandetes Rechteck',
     filledRectanglePen: 'Ausgefülltes Rechteck',
-    lockRotation: 'Sperre Rotation',
+    outlinedCirclePen: 'Umrandeter Kreis.',
+    lockRotation: 'Drehung sperren',
     paste: 'Einfügen',
+    errorImageHasZeroSize: 'Fehler: Bild hat Größe Null',
+    describeTheImage: 'Bildbeschreibung',
+    fileInput__loading: 'Lade...',
+    fileInput__andNMoreFiles: (n) => `(...${n} mehr)`,
+    penDropdown__baseHelpText: 'Dieses Werkzeug zeichnet Formen oder Freihandlinien.',
+    penDropdown__colorHelpText: 'Ändert die Farbe des Stifts',
+    penDropdown__thicknessHelpText: 'Ändert die Strichstärke des mit dem Stift gezeichneten Strichs.',
+    penDropdown__penTypeHelpText: 'Ändert den Stiftstil.\n\nEs kann entweder ein „Stiftstil“ oder eine „Form“ ausgewählt werden. Bei Auswahl eines „Stiftstils“ werden Freihandlinien gezeichnet. Bei Auswahl einer „Form“ werden Formen gezeichnet.',
+    penDropdown__autocorrectHelpText: 'Wandelt grobe Freihandlinien und Rechtecke in perfekte Linien und Rechtecke um.\n\nDer Stift muss am Ende eines Strichs still gehalten werden, um eine Korrektur auszulösen.',
+    penDropdown__stabilizationHelpText: 'Zeichnet glattere Striche.\n\nDadurch entsteht auch eine kurze Verzögerung zwischen Maus/Stift und Strich.',
+    penDropdown__pressureSensitivityHelpText: 'Ändert die Strichstärke entsprechend der Druckstärke, wenn du ein kompatibles Gerät wie einen Stylus verwendest.',
+    handDropdown__baseHelpText: 'Dieses Werkzeug ist für das Scrollen, Drehen und Zoomen im Editor zuständig.',
+    handDropdown__zoomInHelpText: 'Vergrößert',
+    handDropdown__zoomOutHelpText: 'Verkleinert',
+    handDropdown__resetViewHelpText: 'Setzt den Zoomfaktor auf 100 % zurück und setzt den Bildlauf zurück.',
+    handDropdown__zoomDisplayHelpText: 'Zeigt den aktuellen Zoomfaktor an. 100 % zeigt das Bild in seiner tatsächlichen Größe an.',
+    handDropdown__touchPanningHelpText: 'Wenn aktiviert, verschieben Touchscreen-Gesten das Bild, anstatt es auszuwählen oder zu zeichnen.',
+    handDropdown__lockRotationHelpText: 'Wenn aktiviert, verhindert diese Option, dass Touch-Gesten den Bildschirm drehen.',
+    eraserDropdown__baseHelpText: 'Dieses Werkzeug entfernt Striche, Bilder und Text unter dem Cursor.',
+    eraserDropdown__thicknessHelpText: 'Ändert die Größe des Radierers.',
+    eraserDropdown__fullStrokeEraserHelpText: 'Im vollständigen Modus werden ganze Formen gelöscht.\n\nAußerhalb des vollständigen Modus können Formen teilweise gelöscht werden.',
+    selectionDropdown__baseHelpText: 'Wählt Inhalte aus und bearbeitet die Auswahl',
+    selectionDropdown__resizeToHelpText: 'Schneidet die Zeichnung auf die Größe der aktuell ausgewählten Fläche zu.\n\nWenn die automatische Größenanpassung aktiviert ist, wird sie deaktiviert.',
+    selectionDropdown__deleteHelpText: 'Löscht ausgewählte Elemente.',
+    selectionDropdown__duplicateHelpText: 'Erstellt eine Kopie der ausgewählten Elemente.',
+    selectionDropdown__changeColorHelpText: 'Ändert die Farbe ausgewählter Elemente.',
+    pageDropdown__baseHelpText: 'Steuert die Hintergrundfarbe, das Muster und die Größe der Zeichenfläche.',
+    pageDropdown__backgroundColorHelpText: 'Ändert die Hintergrundfarbe der Zeichenfläche.',
+    pageDropdown__gridCheckboxHelpText: 'Aktiviert/deaktiviert ein Hintergrundraster',
+    pageDropdown__autoresizeCheckboxHelpText: 'Wenn aktiviert, wird die Seite an die Zeichnung angepasst.\n\nWenn deaktiviert, ist die Seite sichtbar und ihre Größe kann manuell festgelegt werden.',
+    pageDropdown__aboutButtonHelpText: 'Zeigt Version, Debugging und andere Informationen an.',
+    colorPickerPipetteHelpText: 'Wählt eine Farbe vom Bildschirm aus.',
+    colorPickerToggleHelpText: 'Öffnet/schließt den Farbwähler.',
+    closeSidebar: (toolName) => `Sidebar für ${toolName} schließen`,
     dropdownShown: (toolName) => `Dropdown-Menü für ${toolName} angezeigt`,
     dropdownHidden: (toolName) => `Dropdown-Menü für ${toolName} versteckt`,
     zoomLevel: (zoomPercent) => `Vergößerung: ${zoomPercent}%`,
     colorChangedAnnouncement: (color) => `Farbe zu ${color} geändert`,
     imageSize: (size, units) => `Bild-Größe: ${size} ${units}`,
     imageLoadError: (message) => `Fehler beim Laden des Bildes: ${message}`,
-    errorImageHasZeroSize: 'Fehler: Bild hat Größe Null',
     penTool: (penNumber) => `Stift ${penNumber}`,
     selectionTool: 'Auswahl',
-    eraserTool: 'Radiergummi',
+    selectAllTool: 'Alle auswählen',
+    eraserTool: 'Radierer',
     touchPanTool: 'Ansicht mit Touchscreen verschieben',
     twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern',
     undoRedoTool: 'Rückgängig/Wiederholen',
     rightClickDragPanTool: 'Rechtsklick-Ziehen',
     pipetteTool: 'Farbe von Bildschirm auswählen',
     keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht',
-    textTool: 'Text',
+    selectionMenu__show: 'Auswahlmenü anzeigen',
+    selectionMenu__copyToClipboard: 'In Zwischenablage kopieren',
+    selectionMenu__duplicate: 'Duplizieren',
+    selectionMenu__delete: 'Löschen',
+    selectionMenu__paste: 'Einfügen',
+    copyPasteError__heading: 'Kopieren/Einfügen',
+    copyPasteError__description: 'Ein Fehler ist aufgetreten – dieses Tool hat möglicherweise keinen Zugriff auf die Zwischenablage.',
+    copyPasteError__errorDetails: 'Fehler anzeigen',
+    copyPasteError__pasteRetry: 'Um es erneut zu versuchen, füge bitte den Text in das Eingabefeld unten ein:',
+    copyPasteError__copyMe: 'Kopiere mich!',
+    autocorrectedTo: (strokeDescription) => `Automatisch korrigiert zu ${strokeDescription}`,
+    autocorrectionCanceled: 'Autokorrektur abgebrochen',
     enterTextToInsert: 'Einzufügender Text',
-    changeTool: 'Wechsle Werkzeug',
-    pasteHandler: 'Copy-Paste-Handler',
-    findLabel: 'Finde',
-    toNextMatch: 'Nächstes',
+    changeTool: 'Werkzeug wechseln',
+    pasteHandler: 'Kopieren-Einfügen-Handler',
+    soundExplorer: 'Klangbasierte Bilderkundung',
+    disableAccessibilityExploreTool: 'Klangbasierte Erkundung deaktivieren',
+    enableAccessibilityExploreTool: 'Klangbasierte Erkundung aktivieren',
+    soundExplorerUsageAnnouncement: 'Soundbasierte Bilduntersuchung aktiviert: Klicke/ziehe den Bildschirm, um eine akustische Darstellung verschiedener Bildbereiche abzuspielen.',
+    findLabel: 'Suchen',
+    toNextMatch: 'Weiter',
     closeDialog: 'Schließen',
-    findDialogShown: 'Finde-Dialog angezeigt',
-    findDialogHidden: 'Finde-Dialog versteckt',
+    findDialogShown: 'Suchen-Dialog angezeigt',
+    findDialogHidden: 'Suchen-Dialog versteckt',
     focusedFoundText: (matchIdx, totalMatches) => `Sieh Treffer ${matchIdx} von ${totalMatches} an`,
+    anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
+    copied: (count) => `Copied ${count} item(s)`,
+    pasted: (count) => `Pasted ${count} item(s)`,
     toolEnabledAnnouncement: (toolName) => `${toolName} aktiviert`,
     toolDisabledAnnouncement: (toolName) => `${toolName} deaktiviert`,
     updatedViewport: 'Transformierte Ansicht',
     transformedElements: (elemCount, action) => `${elemCount} Element${1 === elemCount ? '' : 'e'} transformiert (${action})`,
     resizeOutputCommand: (newSize) => `Bildgröße auf ${newSize.w}x${newSize.h} geändert`,
+    enabledAutoresizeOutputCommand: 'Automatische Größenanpassung der Ausgabe aktiviert',
+    disabledAutoresizeOutputCommand: 'Automatische Größenanpassung der Ausgabe deaktiviert',
     addComponentAction: (componentDescription) => `${componentDescription} hinzugefügt`,
     eraseAction: (elemDescription, countErased) => `${countErased} ${elemDescription} gelöscht`,
     duplicateAction: (elemDescription, countErased) => `${countErased} ${elemDescription} dupliziert`,
+    unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`,
     inverseOf: (actionDescription) => `${actionDescription} umgekehrt`,
     elements: 'Elemente',
     erasedNoElements: 'Nichts entfernt',
     duplicatedNoElements: 'Nichts dupliziert',
     rotatedBy: (degrees) => `${Math.abs(degrees)} Grad ${degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`,
-    movedLeft: 'Nacht links bewegt',
-    movedUp: 'Nacht oben bewegt',
-    movedDown: 'Nacht unten bewegt',
-    movedRight: 'Nacht rechts bewegt',
+    movedLeft: 'Nach links bewegt',
+    movedUp: 'Nach oben bewegt',
+    movedDown: 'Nach unten bewegt',
+    movedRight: 'Nach rechts bewegt',
     zoomedOut: 'Ansicht verkleinert',
     zoomedIn: 'Ansicht vergrößert',
+    andNMoreCommands: (count) => `Und noch ${count} weitere Befehle.`,
     selectedElements: (count) => `${count} Element${1 === count ? '' : 'e'} ausgewählt`,
+    unlabeledImageNode: 'Bild ohne Label',
     stroke: 'Strich',
     svgObject: 'SVG-Objekt',
+    emptyBackground: 'Leerer Hintergrund',
+    gridBackground: 'Hintergrundraster',
+    filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`,
     text: (text) => `Text-Objekt: ${text}`,
+    imageNode: (label) => `Bild: ${label}`,
+    restyledElement: (elementDescription) => `${elementDescription} umgestaltet`,
     pathNodeCount: (count) => `Es gibt ${count} sichtbare Pfad-Objekte.`,
     textNodeCount: (count) => `Es gibt ${count} sichtbare Text-Knotenpunkte.`,
-    textNode: (content) => `Text: ${content}`,
     imageNodeCount: (nodeCount) => `Es gibt ${nodeCount} sichtbare Bild-Knoten.`,
-    imageNode: (label) => `Bild: ${label}`,
-    unlabeledImageNode: 'Bild ohne Label',
+    textNode: (content) => `Text: ${content}`,
     rerenderAsText: 'Als Text darstellen',
     accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.',
-    loading: (percentage) => `Laden ${percentage}%...`,
-    doneLoading: 'Laden fertig',
+    loading: (percentage) => `${percentage}% geladen...`,
     imageEditor: 'Bild-Editor',
+    doneLoading: 'Fertig geladen',
     undoAnnouncement: (commandDescription) => `${commandDescription} rückgängig gemacht`,
     redoAnnouncement: (commandDescription) => `${commandDescription} wiederholt`,
-    reformatSelection: 'Formatiere Auswahl',
-    documentProperties: 'Seite',
-    backgroundColor: 'Hintergrundfarbe: ',
-    imageWidthOption: 'Breite: ',
-    imageHeightOption: 'Höhe: ',
-    useGridOption: 'Gitter: ',
-    toggleOverflow: 'Mehr',
-    selectAllTool: 'Alle auswählen',
-    soundExplorer: 'Klangbasierte Bilderkundung',
-    disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung',
-    enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung',
-    unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`,
-    emptyBackground: 'Leerer Hintergrund',
-    filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`,
-    restyledElement: (elementDescription) => `${elementDescription} umgestaltet`,
+    softwareLibraries: 'Bibliotheken',
+    developerInformation: 'Enwicklerinformation',
 };
 export default localization;

package/dist/mjs/toolbar/utils/makeDraggable.mjs

@@ -14,15 +14,13 @@ const makeDraggable = (dragElement, options) => {
         if (dragElements.includes(element)) {
             return true;
         }
-        // Some inputs handle dragging themselves. Don't also interpret such gestures
-        // as dragging the dropdown.
-        const undraggableElementTypes = ['INPUT', 'SELECT', 'IMG'];
+        // Some elements need to handle drag events to avoid breaking the UI:
+        const undraggableElementTypes = ['INPUT', 'SELECT'];
         let hasSuitableAncestors = false;
         let ancestor = element.parentElement;
         while (ancestor) {
-            if (undraggableElementTypes.includes(ancestor.tagName)) {
+            if (undraggableElementTypes.includes(ancestor.tagName))
                 break;
-            }
             if (dragElements.includes(ancestor)) {
                 hasSuitableAncestors = true;
                 break;
@@ -31,6 +29,30 @@ const makeDraggable = (dragElement, options) => {
         }
         return !undraggableElementTypes.includes(element.tagName) && hasSuitableAncestors;
     };
+    const canScrollAncestorVertically = (element, direction) => {
+        if (!(element instanceof HTMLElement))
+            return false;
+        let ancestor = element;
+        // Only consider ancestors within the draggable element: This should not
+        // consider the main document scroll element:
+        while (ancestor && !dragElements.includes(ancestor)) {
+            // Workaround: Certain content can't scroll completely to the start/end
+            // (e.g. paged lists). To work around this, define a small, non-zero
+            // tolerance. Within this tolerance, the element is considered "completely
+            // scrolled":
+            const epsilon = 10;
+            if (ancestor.scrollHeight > ancestor.clientHeight + epsilon) {
+                const canScrollUp = ancestor.scrollTop > epsilon;
+                const canScrollDown = ancestor.scrollTop + ancestor.clientHeight < ancestor.scrollHeight - epsilon;
+                if (direction.y < 0 && canScrollDown)
+                    return true;
+                if (direction.y > 0 && canScrollUp)
+                    return true;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return false;
+    };
     const removeEventListenerCallbacks = [];
     const addEventListener = (listenerType, listener, options) => {
         dragElement.addEventListener(listenerType, listener, options);
@@ -42,8 +64,8 @@ const makeDraggable = (dragElement, options) => {
     // Returns whether the current (or if no current, **the last**) gesture is roughly a click.
     // Because this can be called **after** a gesture has just ended, it should not require
     // the gesture to be in progress.
-    const isRoughlyClick = () => {
-        return Math.hypot(lastX - startX, lastY - startY) < clickThreshold;
+    const isRoughlyClick = (currentX, currentY) => {
+        return Math.hypot(currentX - startX, currentY - startY) < clickThreshold;
     };
     let startedDragging = false;
     addEventListener('pointerdown', (event) => {
@@ -70,7 +92,7 @@ const makeDraggable = (dragElement, options) => {
             capturedPointerId = null;
         }
         options.onDragEnd({
-            roughlyClick: isRoughlyClick(),
+            roughlyClick: isRoughlyClick(lastX, lastY),
             endTimestamp: performance.now(),
             displacement: Vec2.of(lastX - startX, lastY - startY),
         });
@@ -88,18 +110,19 @@ const makeDraggable = (dragElement, options) => {
             onGestureEnd(event);
             return undefined;
         }
-        // Only capture after motion -- capturing early prevents click events in Chrome.
-        if (capturedPointerId === null && !isRoughlyClick()) {
-            dragElement.setPointerCapture(event.pointerId);
-            capturedPointerId = event.pointerId;
-        }
         const x = event.clientX;
         const y = event.clientY;
+        const isClick = isRoughlyClick(x, y);
         const dx = x - lastX;
         const dy = y - lastY;
-        const isClick = Math.abs(x - startX) <= clickThreshold && Math.abs(y - startY) <= clickThreshold;
-        if (!isClick || startedDragging) {
-            options.onDrag(dx, dy, Vec2.of(x - startX, y - startY));
+        const deltaToStart = Vec2.of(x - startX, y - startY);
+        const isScroll = () => canScrollAncestorVertically(event.target, deltaToStart);
+        if (startedDragging || (!isClick && !isScroll())) {
+            options.onDrag(dx, dy, deltaToStart);
+            if (capturedPointerId === null) {
+                dragElement.setPointerCapture(event.pointerId);
+                capturedPointerId = event.pointerId;
+            }
             lastX = x;
             lastY = y;
             startedDragging = true;
@@ -114,6 +137,13 @@ const makeDraggable = (dragElement, options) => {
     });
     addEventListener('pointerup', onGestureEnd);
     addEventListener('pointercancel', onGestureEnd);
+    // In Chrome (as of Dec 2025), .preventDefault needs to be called from ontouchmove
+    // to allow the drag event to continue to be handled.
+    addEventListener('touchmove', (event) => {
+        if (startedDragging && event.touches.length > 0) {
+            event.preventDefault();
+        }
+    });
     return {
         removeListeners: () => {
             for (const removeListenerCallback of removeEventListenerCallbacks) {

package/dist/mjs/version.mjs

@@ -5,5 +5,5 @@
  */
 export default {
     // Note: Auto-updated by prebuild.js:
-    number: '1.31.1',
+    number: '1.33.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.31.1",
+	"version": "1.33.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.31.1",
+		"@js-draw/math": "^1.33.0",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.31.1",
+		"@js-draw/build-tool": "^1.33.0",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "c232b25b295e7c3e1fb53124599d4c3a27a2d042"
+	"gitHead": "8f427476d052d5a3276aa5dbdac535f0d5f3fcd3"
 }

package/src/toolbar/widgets/components/makeSnappedList.scss

@@ -1,7 +1,7 @@
 // Repeat for specificity.
 // TODO(v2): Refactor everything to use RCSS.
 :root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
-	height: min(200px, 50vh);
+	height: min(140px, 50vh);
 	position: relative;
 	display: flex;
 	align-items: center;