style: fix horizontal screen overflow on logbook entry form

client/src/App.css

@@ -506,6 +506,8 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
 }
 
 .section-title-bar h2 {
@@ -853,6 +855,9 @@ body {
   font-size: 20px;
   margin: 0;
   color: #fbbf24;
+  min-width: 0;
+  flex-shrink: 1;
+  word-break: break-word;
 }
 
 .form-icon {
@@ -871,7 +876,7 @@ body {
   gap: 20px;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 1024px) {
   .form-grid {
     grid-template-columns: 1fr;
   }
@@ -1749,7 +1754,7 @@ body:has(.theme-cupertino) {
 }
 
 /* Responsive Form and Paddings Fix */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .app-layout {
     padding: 16px;
   }
@@ -1759,6 +1764,9 @@ body:has(.theme-cupertino) {
   .form-card {
     padding: 20px;
   }
+  .member-editor-card {
+    padding: 16px;
+  }
 }
 
 @media (max-width: 480px) {
@@ -1784,6 +1792,9 @@ body:has(.theme-cupertino) {
   .form-actions button {
     width: 100%;
   }
+  .member-editor-card {
+    padding: 12px;
+  }
 }
 
 .gps-input-row {
@@ -1792,6 +1803,15 @@ body:has(.theme-cupertino) {
   width: 100%;
 }
 
+.gps-input-row input {
+  flex: 1;
+  min-width: 0;
+}
+
+.gps-input-row button {
+  flex: 0 0 auto;
+}
+
 @media (max-width: 480px) {
   .gps-input-row {
     flex-wrap: wrap;
@@ -1805,5 +1825,27 @@ body:has(.theme-cupertino) {
   }
 }
 
+.section-title-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.consumption-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+@media (max-width: 480px) {
+  .consumption-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
+
 
 

client/src/components/LogEntryEditor.tsx

@@ -519,7 +519,7 @@ export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryE
       {/* Top Header Controls */}
       <div className="form-card" style={{ paddingBottom: '20px' }}>
         <div className="section-title-bar">
-          <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+          <div className="section-title-left">
             <button className="btn-back" onClick={onBack} style={{ padding: '6px 12px' }}>
               <ChevronLeft size={16} />
               {t('logs.back_to_list')}
@@ -615,7 +615,7 @@ export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryE
               <Compass size={20} className="form-icon" />
               <h3>{t('logs.freshwater')}</h3>
             </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+            <div className="consumption-grid">
               <div className="input-group">
                 <label>{t('logs.morning')} (L)</label>
                 <input
@@ -671,7 +671,7 @@ export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryE
               <Compass size={20} className="form-icon" />
               <h3>{t('logs.fuel')}</h3>
             </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+            <div className="consumption-grid">
               <div className="input-group">
                 <label>{t('logs.morning')} (L)</label>
                 <input