fix(sync): resolve request body size limit issues and refine responsive photo grid layout

client/src/App.css

@@ -880,6 +880,11 @@ body {
   .form-grid {
     grid-template-columns: 1fr;
   }
+  .vessel-photo-wrapper,
+  .sails-section,
+  .grid-span-2 {
+    grid-column: span 1 !important;
+  }
 }
 
 .vessel-form label {
@@ -1641,6 +1646,8 @@ body:has(.theme-cupertino) {
   background: rgba(56, 189, 248, 0.15);
   border-color: #38bdf8;
   color: #38bdf8;
+}.grid-span-2 {
+  grid-column: span 2;
 }
 
 /* Yacht Photo Styling */

client/src/components/CrewForm.tsx

@@ -517,7 +517,7 @@ export default function CrewForm({ logbookId }: CrewFormProps) {
               />
             </div>
 
-            <div className="input-group" style={{ gridColumn: 'span 2' }}>
+            <div className="input-group grid-span-2">
               <label>{t('crew.diseases')}</label>
               <input
                 type="text"
@@ -722,7 +722,7 @@ export default function CrewForm({ logbookId }: CrewFormProps) {
                 />
               </div>
 
-              <div className="input-group" style={{ gridColumn: 'span 2' }}>
+              <div className="input-group grid-span-2">
                 <label>{t('crew.diseases')}</label>
                 <input
                   type="text"