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: [
@@ -129,7 +128,6 @@ export function ScreenTimeTicketBrowser({
       tempVariablesObj?.variables?.timeTicketInput[0]
     );
 
-
     const result = await insertTimeTicket(tempVariablesObj);
     console.log("insertTimeTicket, result :", result);
 
@@ -145,12 +143,13 @@ export function ScreenTimeTicketBrowser({
       setCurrentSCC(null);
     }
 
-
     setLoading(false);
   };
 
   return (
-    <View style={{flex:1}}> 
+    <View style={localStyles.content}>
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <Card>
           <JobIdSearchSelect
             currentValue={currentSJobId}
             onJobSelected={setCurrentSJobId}
@@ -168,12 +167,22 @@ export function ScreenTimeTicketBrowser({
           {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} />