Minor UI fixes.

.gitignore

@@ -25,3 +25,5 @@ android/**
 ios/**
 
 .env.local
+
+dist/**

app/jobs/[jobId]/_layout.tsx

@@ -14,7 +14,6 @@ function JobTabLayout() {
         tabBarPosition: "top",
         headerShown: false,
         animation: "shift",
-
         tabBarStyle: {
           //  marginTop: -50
         },

components/job-lines/job-lines.jsx

@@ -3,7 +3,7 @@ import { useQuery } from "@apollo/client";
 import { useGlobalSearchParams } from "expo-router";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { ScrollView } from "react-native";
+import { ScrollView, useWindowDimensions } from "react-native";
 import { ActivityIndicator, DataTable } from "react-native-paper";
 import ErrorDisplay from "../error/error-display";
 
@@ -16,6 +16,8 @@ export default function JobLines() {
     },
     skip: !jobId,
   });
+  const { width, height } = useWindowDimensions();
+  const isLandscape = width > height;
 
   const { t } = useTranslation();
   const onRefresh = async () => {
@@ -36,20 +38,22 @@ export default function JobLines() {
 
   const job = data.jobs_by_pk;
   return (
-    <ScrollView>
+    <ScrollView style={{ flex: 1, marginHorizontal: isLandscape ? 48 : 12 }}>
       <DataTable>
         <DataTable.Header>
-          <DataTable.Title> {t("jobdetail.labels.lines_desc")}</DataTable.Title>
+          <DataTable.Title style={{ flex: 4 }}>
-          <DataTable.Title>
+            {t("jobdetail.labels.lines_desc")}
+          </DataTable.Title>
+          <DataTable.Title style={{ flex: 2 }}>
             {t("jobdetail.labels.lines_lbr_ty")}
           </DataTable.Title>
-          <DataTable.Title numeric>
+          <DataTable.Title style={{ flex: 1 }} numeric>
             {t("jobdetail.labels.lines_lb_hrs")}
           </DataTable.Title>
-          <DataTable.Title>
+          <DataTable.Title style={{ flex: 2 }}>
             {t("jobdetail.labels.lines_part_type")}
           </DataTable.Title>
-          <DataTable.Title numeric>
+          <DataTable.Title style={{ flex: 1 }} numeric>
             {t("jobdetail.labels.lines_qty")}
           </DataTable.Title>
         </DataTable.Header>
@@ -59,14 +63,18 @@ export default function JobLines() {
             <DataTable.Cell style={{ flex: 4 }}>
               {item.line_desc}
             </DataTable.Cell>
-            <DataTable.Cell>
+            <DataTable.Cell style={{ flex: 2 }}>
               {item.mod_lbr_ty && t(`jobdetail.lbr_types.${item.mod_lbr_ty}`)}
             </DataTable.Cell>
-            <DataTable.Cell numeric>{item.mod_lb_hrs}</DataTable.Cell>
+            <DataTable.Cell style={{ flex: 1 }} numeric>
-            <DataTable.Cell>
+              {item.mod_lb_hrs}
+            </DataTable.Cell>
+            <DataTable.Cell style={{ flex: 2 }}>
               {item.part_type && t(`jobdetail.part_types.${item.part_type}`)}
             </DataTable.Cell>
-            <DataTable.Cell numeric>{item.part_qty}</DataTable.Cell>
+            <DataTable.Cell style={{ flex: 1 }} numeric>
+              {item.part_qty}
+            </DataTable.Cell>
           </DataTable.Row>
         ))}
       </DataTable>

components/job-tombstone/job-tombstone.jsx

@@ -243,6 +243,9 @@ function JobTombstone({ bodyshop }) {
           </View>
         </Card.Content>
       </Card>
+      <View
+        style={{ height: 64 }} //Spacer
+      />
     </ScrollView>
   );
 }

components/jobs-list/jobs-list.jsx

@@ -48,7 +48,10 @@ export function JobListComponent({ bodyshop }) {
   const jobs = data ? [...(data?.jobs || []), { id: "footer-spacer" }] : [];
 
   return (
-    <SafeAreaView style={{ flex: 1, marginHorizontal: 12 }} edges={["top"]}>
+    <SafeAreaView
+      style={{ flex: 1, marginHorizontal: 12, paddingBottom: 48 }}
+      edges={["top"]}
+    >
       <Text
         variant="headlineMedium"
         style={{ marginBottom: 12, fontWeight: "600" }}

components/sign-in/sign-in.jsx

@@ -82,7 +82,11 @@ export function SignIn({ emailSignInStart, signingIn }) {
             />
 
             <SignInError />
-            <Button loading={signingIn} onPress={handleSubmit}>
+            <Button
+              loading={signingIn}
+              mode="outlined"
+              onPress={handleSubmit}
+            >
               {t("signin.actions.signin")}
             </Button>
           </View>