fix(ui): Besegelungs-Badges auf Mobile platzsparender anordnen

Die Segel-Pills nutzen die volle Formularbreite und wrappen kompakt, statt in der halben Grid-Spalte untereinander zu stapeln.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/App.css

@@ -2433,6 +2433,18 @@ html.scheme-dark .themed-select-option.is-selected {
   .track-map-container {
     height: min(360px, 45svh);
   }
+
+  .sails-picker-pills {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
+    gap: 6px;
+  }
+
+  .sail-pill {
+    text-align: center;
+    padding: 3px 8px;
+    font-size: 11px;
+  }
 }
 
 /* ========================================== */
@@ -2693,10 +2705,7 @@ html.theme-cupertino .events-scroll-container {
 
 /* Event Editor Interactive Sails Picker */
 .sails-picker-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
+  grid-column: 1 / -1;
 }
 
 .sails-picker-pills {
@@ -2715,6 +2724,7 @@ html.theme-cupertino .events-scroll-container {
   cursor: pointer;
   user-select: none;
   transition: all 0.2s ease;
+  white-space: nowrap;
 }
 
 .sail-pill:hover {
@@ -2742,7 +2752,9 @@ html.theme-cupertino .events-scroll-container {
   background: rgba(56, 189, 248, 0.15);
   border-color: #38bdf8;
   color: #38bdf8;
-}.grid-span-2 {
+}
+
+.grid-span-2 {
   grid-column: span 2;
 }
 

client/src/components/LogEntryEditor.tsx

@@ -1559,7 +1559,21 @@ export default function LogEntryEditor({
                   onChange={(e) => setEvSailsOrMotor(e.target.value)}
                   disabled={saving}
                 />
-                <div className="sails-picker-container">
+              </div>
+
+              <div className="input-group">
+                <label>{t('logs.event_distance')}</label>
+                <input
+                  type="text"
+                  placeholder="e.g. 12 nm"
+                  className="input-text"
+                  value={evDistance}
+                  onChange={(e) => setEvDistance(e.target.value)}
+                  disabled={saving}
+                />
+              </div>
+
+              <div className="sails-picker-container grid-span-2">
                 <div className="sails-picker-pills">
                   {(yachtSails.length > 0 ? yachtSails : defaultSails).map((sail) => (
                     <span
@@ -1578,21 +1592,8 @@ export default function LogEntryEditor({
                   </span>
                 </div>
               </div>
-              </div>
 
-              <div className="input-group">
-                <label>{t('logs.event_distance')}</label>
-                <input
-                  type="text"
-                  placeholder="e.g. 12 nm"
-                  className="input-text"
-                  value={evDistance}
-                  onChange={(e) => setEvDistance(e.target.value)}
-                  disabled={saving}
-                />
-              </div>
-
-              <div className="input-group" style={{ gridColumn: 'span 2' }}>
+              <div className="input-group grid-span-2">
                 <label>{t('logs.event_remarks')}</label>
                 <input
                   type="text"