Mobile UX fixes

frontend/src/features/vehicles/mobile/VehiclesMobileScreen.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useTransition, useEffect } from 'react';
-import { Box, Typography, Grid, Fab } from '@mui/material';
+import { Box, Typography, Grid, Button } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import { useVehicles } from '../hooks/useVehicles';
 import { useOptimisticVehicles } from '../hooks/useOptimisticVehicles';
@@ -82,38 +82,33 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
 
   if (!optimisticVehicles.length) {
     return (
-      <Box sx={{ pb: 10, position: 'relative' }}>
+      <Box sx={{ pb: 10 }}>
         <Section title="Vehicles">
           <Box sx={{ textAlign: 'center', py: 12 }}>
             <Typography color="text.secondary" sx={{ mb: 2 }}>
               No vehicles added yet
             </Typography>
-            <Typography variant="caption" color="text.secondary">
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 3 }}>
               Add your first vehicle to get started
             </Typography>
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<AddIcon />}
+              onClick={() => onAddVehicle?.()}
+              sx={{ minWidth: 160 }}
+            >
+              Add Vehicle
+            </Button>
           </Box>
         </Section>
-
-        {/* Floating Action Button */}
-        <Fab
-          color="primary"
-          sx={{
-            position: 'fixed',
-            bottom: 80, // Above bottom navigation
-            right: 16,
-            zIndex: 1000
-          }}
-          onClick={() => onAddVehicle?.()}
-        >
-          <AddIcon />
-        </Fab>
       </Box>
     );
   }
 
   return (
     <MobileVehiclesSuspense>
-      <Box sx={{ pb: 10, position: 'relative' }}>
+      <Box sx={{ pb: 10 }}>
         <Section title={`Vehicles ${isOptimisticPending ? '(Updating...)' : ''}`}>
           <Grid container spacing={2}>
             {filteredVehicles.map((vehicle) => (
@@ -126,20 +121,6 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
             ))}
           </Grid>
         </Section>
-
-        {/* Floating Action Button */}
-        <Fab
-          color="primary"
-          sx={{
-            position: 'fixed',
-            bottom: 80, // Above bottom navigation
-            right: 16,
-            zIndex: 1000
-          }}
-          onClick={() => onAddVehicle?.()}
-        >
-          <AddIcon />
-        </Fab>
       </Box>
     </MobileVehiclesSuspense>
   );