fix(handy): gleiches Logo, schiebbare Apps, Widgets in voller Breite

Drei Sachen, die Marc aufgefallen sind:

Das Quadrat im Logo war in der HoneyBar in voller Groesse, in der Menueleiste
klein und angehoben — nebeneinander sah das wie zwei verschiedene Logos aus.
Jetzt beide 10px.

Bei vielen Apps quetschte das Flex-Raster die Namen zusammen, statt den Streifen
schiebbar zu machen: flex-shrink stand auf 1. Jetzt schiebt man seitwaerts, in
beiden Leisten, mit einem Schatten am rechten Rand als Hinweis. Am Handy war
das der Unterschied zwischen "sechs Apps erreichbar" und "drei Buchstabenreste".

Und die Widgets waren einspaltig auf 320px begrenzt, waehrend das Systemfenster
die volle Breite nahm — drei verschieden breite Kaesten untereinander sehen aus
wie ein Fehler. Dazu wird aus der Kachelwand am Handy eine Liste: sechs Apps
passen jetzt auf einen Bildschirm statt auf drei.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/honeybar/honeybar.js

@@ -144,10 +144,24 @@
       }
       .home { letter-spacing: .14em; color: var(--p); padding-left: 2px; }
       .home b { color: var(--p-mid); font-weight: 400; }
+      /* Dasselbe Quadrat wie in der Menüleiste des Schreibtischs: dort ist es
+         klein und leicht angehoben. Ein Zeichen in voller Größe sah daneben
+         wie ein anderes Logo aus. */
+      .home .hex { font-size: 10px; vertical-align: 2px; }
       .home:hover { border-color: var(--p-dim); }
-      .apps { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
+      /* Bei vielen Apps schiebt man den Streifen seitwärts. Ohne
+         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. */
+      .apps {
+        display: flex; gap: 4px; flex: 1 1 auto; min-width: 0;
+        overflow-x: auto; scrollbar-width: none;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x proximity;
+        mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
+      }
       .apps::-webkit-scrollbar { display: none; }
-      .app { color: var(--p-mid); letter-spacing: .08em; }
+      .app { color: var(--p-mid); letter-spacing: .08em; flex: 0 0 auto; scroll-snap-align: end; }
       .app:hover { color: var(--p); border-color: var(--p-dim); }
       .app[aria-current="page"] {
         background: var(--p); border-color: var(--p); color: var(--bg); text-shadow: none;
@@ -182,7 +196,7 @@
     </style>
 
     <div class="bar">
-      <a class="home" id="home" title="HoneyOS">&#9632; HONEY<b>OS</b></a>
+      <a class="home" id="home" title="HoneyOS"><span class="hex">&#9632;</span> HONEY<b>OS</b></a>
       <nav class="apps" id="apps"></nav>
       <div class="right">
         <span class="wx" id="wx" hidden></span>