diff --git a/client/src/App.css b/client/src/App.css
index 4ff0cc6..99f66d7 100644
--- a/client/src/App.css
+++ b/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;
 }
 
diff --git a/client/src/components/LogEntryEditor.tsx b/client/src/components/LogEntryEditor.tsx
index bcfd54d..8fb0b1b 100644
--- a/client/src/components/LogEntryEditor.tsx
+++ b/client/src/components/LogEntryEditor.tsx
@@ -1559,25 +1559,6 @@ export default function LogEntryEditor({
                   onChange={(e) => setEvSailsOrMotor(e.target.value)}
                   disabled={saving}
                 />
-                <div className="sails-picker-container">
-                  <div className="sails-picker-pills">
-                    {(yachtSails.length > 0 ? yachtSails : defaultSails).map((sail) => (
-                      <span
-                        key={sail}
-                        className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
-                        onClick={() => toggleSailOrMotor(sail)}
-                      >
-                        {sail}
-                      </span>
-                    ))}
-                    <span
-                      className={`sail-pill motor-pill ${isItemActive(t('logs.motor_propulsion')) ? 'active' : ''}`}
-                      onClick={() => toggleSailOrMotor(t('logs.motor_propulsion'))}
-                    >
-                      {t('logs.motor_propulsion')}
-                    </span>
-                  </div>
-                </div>
               </div>
 
               <div className="input-group">
@@ -1592,7 +1573,27 @@ export default function LogEntryEditor({
                 />
               </div>
 
-              <div className="input-group" style={{ gridColumn: 'span 2' }}>
+              <div className="sails-picker-container grid-span-2">
+                <div className="sails-picker-pills">
+                  {(yachtSails.length > 0 ? yachtSails : defaultSails).map((sail) => (
+                    <span
+                      key={sail}
+                      className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
+                      onClick={() => toggleSailOrMotor(sail)}
+                    >
+                      {sail}
+                    </span>
+                  ))}
+                  <span
+                    className={`sail-pill motor-pill ${isItemActive(t('logs.motor_propulsion')) ? 'active' : ''}`}
+                    onClick={() => toggleSailOrMotor(t('logs.motor_propulsion'))}
+                  >
+                    {t('logs.motor_propulsion')}
+                  </span>
+                </div>
+              </div>
+
+              <div className="input-group grid-span-2">
                 <label>{t('logs.event_remarks')}</label>
                 <input
                   type="text"