Schublade trug die Ausblendmaske des App-Streifens

Das Menue hiess class='menu apps' — und .apps ist der Streifen in der
Leiste, der seine rechten 18 px per mask-image ausblendet, damit man
sieht, dass es seitwaerts weitergeht. Die Schublade erbte die Maske und
loeste sich rechts auf. In der Geometrie war nichts zu sehen, deshalb
hatte ich es zweimal uebersehen: nichts ragte hinaus, der Rahmen war da.

Heisst jetzt .menu.schublade, mit Test dagegen: class='apps' darf genau
einmal vorkommen.

web/honeybar/honeybar.js

@@ -146,6 +146,8 @@
          flex-shrink:0 an den Knöpfen quetscht das Raster sie stattdessen
          zusammen, bis nur noch Buchstabenreste dastehen — am Handy sofort.
          Der Schatten rechts zeigt an, dass es weitergeht. */
+      /* Nur der Streifen in der Leiste. Wer eine weitere Klasse "apps"
+         vergibt, erbt hier Maske und Bildlauf mit. */
       .apps {
         display: flex; gap: 4px; flex: 1 1 auto; min-width: 0;
         overflow-x: auto; scrollbar-width: none;
@@ -198,7 +200,11 @@
          aufgemacht, weil man etwas sucht — also wird gelesen, nicht nur
          wiedererkannt. Deshalb stehen hier immer Namen, anders als im
          Streifen oben, wo ein Blick reichen muss. */
-      .menu.apps { min-width: 318px; max-width: min(360px, calc(100vw - 12px)); }
+      /* NICHT .menu.apps nennen: Der Streifen oben heisst .apps und blendet
+         seine rechten 18 px mit einer Maske aus, damit man sieht, dass es
+         seitwaerts weitergeht. Eine zweite Klasse "apps" am Menue holt diese
+         Maske mit — die Schublade sah rechts aus, als loese sie sich auf. */
+      .menu.schublade { min-width: 318px; max-width: min(360px, calc(100vw - 12px)); }
       /* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
          auseinanderdruecken, und die Schublade wird breiter als der Schirm. */
       .drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
@@ -258,7 +264,7 @@
       <button id="hide" role="menuitem">HoneyBar einklappen</button>
     </div>
 
-    <div class="menu apps" id="menu" role="menu">
+    <div class="menu schublade" id="menu" role="menu">
       <div class="head">wechseln zu</div>
       <div class="drawer" id="menuApps"></div>
     </div>`;

wetter_test.go

@@ -46,6 +46,28 @@ func TestMitOrtKommtDasWetter(t *testing.T) {
 	}
 }
 
+// Der Streifen in der Leiste heisst .apps und blendet seine rechten 18 Pixel
+// mit einer Maske aus. Bekommt ein zweites Element dieselbe Klasse, erbt es die
+// Maske — die Schublade sah rechts aus, als loese sie sich auf, und in der
+// Geometrie war nichts zu sehen. Deshalb hier festgenagelt.
+func TestNurDerStreifenHeisstApps(t *testing.T) {
+	b, err := os.ReadFile("web/honeybar/honeybar.js")
+	if err != nil {
+		t.Fatal(err)
+	}
+	src := string(b)
+
+	for _, verboten := range []string{`class="menu apps"`, `class="apps menu"`} {
+		if strings.Contains(src, verboten) {
+			t.Errorf("%s: Das Menue erbt damit die Ausblendmaske des App-Streifens", verboten)
+		}
+	}
+	// Genau ein Element darf die Klasse tragen: der Streifen selbst.
+	if n := strings.Count(src, `class="apps"`); n != 1 {
+		t.Errorf(`class="apps" kommt %dx vor, erwartet genau einmal (der Streifen)`, n)
+	}
+}
+
 // Die HoneyBar bringt ihr CSS und ihr Markup in Vorlagenzeichenketten mit.
 // Ein Backtick in einem Kommentar beendet die Zeichenkette mittendrin — die
 // Datei ist dann kaputt, und zwar nur in der HoneyBar, nicht auf dem