updated padding across cards and forms

src/components/HistoryList/HistoryList.tsx

@@ -25,7 +25,7 @@ const HistoryList = () => {
   };
 
   return (
-    <Card className="h-100">
+    <Card className="h-100 p-4">
       <CardHeader title="Alert History" />
       <button
         className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
@@ -33,9 +33,9 @@ const HistoryList = () => {
       >
         Clear List
       </button>
-      {isLoading && <p>Loading...</p>}
+      {isLoading && <p className="px-2">Loading...</p>}
-      {error && <p className="text-red-500">Error: {error.message}</p>}
+      {error && <p className="text-red-500 px-2">Error: {error.message}</p>}
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col gap-1 px-2">
         {state?.alertList?.length > 0 ? (
           state?.alertList?.map((alertItem, index) => (
             <div key={index} className="flex flex-row space-x-2">

src/components/SessionForm/HitSearchCard.tsx

@@ -9,9 +9,9 @@ const SessionCard = () => {
   const { dispatch } = useAlertHitContext();
 
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Hit Search"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <FormGroup>
           <label
             htmlFor="VRM"

src/components/SessionForm/SessionCard.tsx

@@ -10,9 +10,9 @@ const SessionCard = () => {
   };
 
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title="Session" />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
           onClick={handleStartClick}

src/components/SettingForms/BearerType/BearerTypeCard.tsx

@@ -4,7 +4,7 @@ import BearerTypeFields from "./BearerTypeFields";
 
 const BearerTypeCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title="Bearer Type" />
       <BearerTypeFields />
     </Card>

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -9,7 +9,7 @@ const BearerTypeFields = () => {
   useFormikContext();
 
   return (
-    <div className="flex flex-col space-y-4">
+    <div className="flex flex-col space-y-4 px-2">
       <div className="flex items-center gap-3 justify-between">
         <label htmlFor="format">Format</label>
         <Field

src/components/SettingForms/Channel1-JSON/ChannelCard.tsx

@@ -4,7 +4,7 @@ import ChannelFields from "./ChannelFields";
 
 const ChannelCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title="Channel 1 (JSON)" />
       <ChannelFields />
     </Card>

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -8,7 +8,7 @@ const ChannelFields = () => {
   useFormikContext();
   const [showPwd, setShowPwd] = useState(false);
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="backoffice" className="m-0">
           Back Office URL

src/components/SettingForms/NPED/NPEDCard.tsx

@@ -5,7 +5,7 @@ import NPEDIcon from "/NPED.svg";
 
 const NPEDCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"NPED Config"} img={NPEDIcon} />
       <NPEDFields />
     </Card>

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -56,7 +56,7 @@ const NPEDFields = () => {
       enableReinitialize
     >
       {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-5">
+        <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label htmlFor="username">Username</label>
             {touched.username && errors.username && (

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -26,7 +26,7 @@ const NPEDHotlist = () => {
     <Formik initialValues={initialValue} onSubmit={handleSubmit}>
       {({ setFieldValue, setErrors, errors }) => {
         return (
-          <Form className="flex flex-col space-y-2">
+          <Form className="flex flex-col space-y-2 px-2">
             <input
               type="file"
               name="file"

src/components/SettingForms/NPED/NPEDHotlistCard.tsx

@@ -4,7 +4,7 @@ import NPEDHotlist from "./NPEDHotlist";
 
 const NPEDHotlistCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={" Hotlist file upload"} />
       <NPEDHotlist />
     </Card>

src/components/SettingForms/OverviewText/OverviewTextCard.tsx

@@ -4,7 +4,7 @@ import OverviewTextFields from "./OverviewTextFields";
 
 const OverviewTextCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Overview Text"} />
       <OverviewTextFields />
     </Card>

src/components/SettingForms/OverviewText/OverviewTextFields.tsx

@@ -6,7 +6,7 @@ const OverviewTextFields = () => {
   useFormikContext();
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="overviewQuality">Include VRM</label>
         <FormToggle name="includeVRM" />

src/components/SettingForms/SightingData/SightingDataCard.tsx

@@ -4,7 +4,7 @@ import SightingDataFields from "./SightingDataFields";
 
 const SightingDataCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Sighting Data"} />
       <SightingDataFields />
     </Card>

src/components/SettingForms/SightingData/SightingDataFields.tsx

@@ -6,7 +6,7 @@ const SightingDataFields = () => {
   useFormikContext();
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="overviewQuality">Overview Quality</label>
         <Field

src/components/SettingForms/System/SystemCard.tsx

@@ -4,7 +4,7 @@ import SystemConfigFields from "./SystemConfigFields.tsx";
 
 const SystemCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"System Config"} />
       <SystemConfigFields />
     </Card>

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -38,7 +38,7 @@ const SystemConfigFields = () => {
       validateOnBlur
     >
       {({ values, errors, touched }) => (
-        <Form className="flex flex-col space-y-5">
+        <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <label
               htmlFor="deviceName"

src/components/SettingForms/WiFi&Modem/ModemCard.tsx

@@ -11,9 +11,9 @@ const ModemCard = () => {
 
   return (
     // TODO: Add switch for Auto vs Manual settings
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Modem"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <FormGroup>
           <label
             htmlFor="apn"

src/components/SettingForms/WiFi&Modem/WiFiCard.tsx

@@ -9,9 +9,9 @@ const WiFiCard = () => {
   const [encryption, setEncryption] = useState("WPA2");
 
   return (
-    <Card className="mb-4">
+    <Card className="p-4">
       <CardHeader title={"WiFi"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
         <FormGroup>
           <label
             htmlFor="ssid"