edited styling of error message

components/error-display/error-display.component.jsx

@@ -14,7 +14,7 @@ const localStyles = StyleSheet.create({
   alert: {
     color: "red",
     textAlign: "center",
-    margin: 15,
-    padding: 15,
+    margin: 8,
+    padding: 8,
   },
 });

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

@@ -172,12 +172,13 @@ export function ScreenTimeTicketBrowser({
             currentRatesNCostCenters={currentRatesNCostCenters}
             onValueSelected={setCurrentSCC}
           />
-          <Button mode="outlined" loading={loading} onPress={handleFinish}>
-            <Text>Clock In</Text>
-          </Button>
           {error && error?.message ? (
             <ErrorDisplay errorMessage={error.message} />
           ) : null}
+          <Button mode="outlined" loading={loading} onPress={handleFinish}>
+            <Text>Clock In</Text>
+          </Button>
+          
         </Card>
         {/* <View style={{ flexGrow: 1, flex: 1 }}>
           <EmployeeClockedInList