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

client/nginx.conf

@@ -1,6 +1,7 @@
 server {
     listen 80;
     server_name localhost;
+    client_max_body_size 50M;
 
     location / {
         root /usr/share/nginx/html;

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"

client/vite.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
   plugins: [
     react(),
     VitePWA({
-      registerType: 'prompt',
+      registerType: 'autoUpdate',
       includeAssets: ['favicon.ico', 'logo.png'],
       manifest: {
         name: 'Kapteins Daagbox',

server/src/index.ts

@@ -12,7 +12,7 @@ const app = express()
 const PORT = process.env.PORT || 5000
 
 app.use(cors())
-app.use(express.json())
+app.use(express.json({ limit: '50mb' }))
 
 // Mount routes
 app.use('/api/auth', authRouter)