elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

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

Browse Source 
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>
This commit is contained in:
elpatron
2026-05-31 11:48:30 +02:00
co-authored by Cursor
parent 51f6a1b291
commit 3992db9d61
2 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/LogEntryEditor.tsx
+21 -20
View File
@@ -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"