added style to copmonents for phone being sideways

components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
 import axios from "axios";
 import { connect } from "react-redux";
 import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
@@ -10,7 +10,7 @@ import {
   selectGettingRates,
   selectSignInError,
 } from "../../redux/employee/employee.selectors";
-import { Button } from "react-native-paper";
+import { Button, Card } from "react-native-paper";
 
 //temp
 import { useQuery } from "@apollo/client";
@@ -97,7 +97,6 @@ export function ScreenTimeTicketBrowser({
     if (currentSJobId)
       console.log("jobid or currentSJobId", currentSJobId?.value);
 
-
     const tempVariablesObj = {
       variables: {
         timeTicketInput: [
@@ -126,10 +125,9 @@ export function ScreenTimeTicketBrowser({
     };
     console.info(
       "INSERT_NEW_TIME_TICKET, variables for clockin. : ",
-       tempVariablesObj?.variables?.timeTicketInput[0]
+      tempVariablesObj?.variables?.timeTicketInput[0]
     );
 
-
     const result = await insertTimeTicket(tempVariablesObj);
     console.log("insertTimeTicket, result :", result);
 
@@ -145,35 +143,46 @@ export function ScreenTimeTicketBrowser({
       setCurrentSCC(null);
     }
 
-
     setLoading(false);
   };
 
   return (
-    <View style={{flex:1}}> 
-      <JobIdSearchSelect
-        currentValue={currentSJobId}
-        onJobSelected={setCurrentSJobId}
-        convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
-        notExported={!currentBodyshop.tt_allow_post_to_invoiced}
-      />
-      <CostCenterSelect
-        currentValue={currentSCC}
-        currentRatesNCostCenters={currentRatesNCostCenters}
-        onValueSelected={setCurrentSCC}
-      />
-      <Button mode="outlined" loading={loading} onPress={handleFinish}>
-        <Text>Clock In</Text>
-      </Button>
-      {error && error?.message ? (
-        <ErrorDisplay errorMessage={error.message} />
-      ) : null}
-
-      <EmployeeClockedInList technician={currentEmployee} />
+    <View style={localStyles.content}>
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <Card>
+          <JobIdSearchSelect
+            currentValue={currentSJobId}
+            onJobSelected={setCurrentSJobId}
+            convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
+            notExported={!currentBodyshop.tt_allow_post_to_invoiced}
+          />
+          <CostCenterSelect
+            currentValue={currentSCC}
+            currentRatesNCostCenters={currentRatesNCostCenters}
+            onValueSelected={setCurrentSCC}
+          />
+          <Button mode="outlined" loading={loading} onPress={handleFinish}>
+            <Text>Clock In</Text>
+          </Button>
+          {error && error?.message ? (
+            <ErrorDisplay errorMessage={error.message} />
+          ) : null}
+        </Card>
+      </ScrollView>
+      <View style={{ flexGrow: 1, flex:1 }}>
+        <EmployeeClockedInList technician={currentEmployee} />
+      </View>
     </View>
   );
 }
 
+const localStyles = StyleSheet.create({
+  content: {
+    display: "flex",
+    flex: 2,
+  },
+});
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps

components/time-ticket/screen-time-ticket-clockoff.component.jsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Button, TextInput } from "react-native-paper";
+import { Button, TextInput, Card } from "react-native-paper";
 import { CostCenterSelect } from "../Selects/select-cost-center";
 import {
   selectCurrentEmployee,
@@ -120,6 +120,7 @@ export function TimeTicketClockOff({
   return (
     <View style={localStyles.content}>
       <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <Card>
         <Formik
           initialValues={{
             costcenter: { currentSCC },
@@ -162,6 +163,7 @@ export function TimeTicketClockOff({
             </View>
           )}
         </Formik>
+        </Card>
       </ScrollView>
       <View style={{ flexGrow: 1 }}>
         <LaborAllocationsTable jobId={currentTmTicketJobId} />