fix: minor tw4 fixes and lint tw format

frontend/src/pages/organization/BillingPage/BillingPage.tsx

@@ -11,13 +11,13 @@ export const BillingPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800 h-full">
       <Helmet>
         <title>{t("common.head-title", { title: t("billing.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
-      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="bg-bunker-800 flex h-full w-full justify-center text-white">
         <div className="w-full max-w-7xl px-6">
           <PageHeader
             title={t("billing.title")}

frontend/src/pages/organization/BillingPage/components/BillingCloudTab/CurrentPlanSection.tsx

@@ -38,7 +38,7 @@ export const CurrentPlanSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <h2 className="mb-8 flex-1 text-xl font-medium text-white">Current usage</h2>
       <TableContainer className="mt-4">
         <Table>
@@ -63,16 +63,14 @@ export const CurrentPlanSection = () => {
                 return (
                   <Tr key={`current-plan-row-${name}`} className="h-12">
                     <Td>
-                      {name}
-                      {toolTipText && (
-                        <Tooltip content={toolTipText}>
-                          <FontAwesomeIcon
-                            icon={faInfoCircle}
-                            className="relative bottom-2 left-2"
-                            size="xs"
-                          />
-                        </Tooltip>
-                      )}
+                      <div className="flex items-center">
+                        {name}
+                        {toolTipText && (
+                          <Tooltip content={toolTipText}>
+                            <FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
+                          </Tooltip>
+                        )}
+                      </div>
                     </Td>
                     <Td>{displayCell(allowed)}</Td>
                     <Td>{used}</Td>

frontend/src/pages/organization/BillingPage/components/BillingCloudTab/ManagePlansModal.tsx

@@ -21,14 +21,14 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
     >
       <ModalContent className="max-w-(--breakpoint-lg)" title="Infisical Cloud Plans">
         <Tab.Group>
-          <Tab.List className="max-w-(--breakpoint-lg) border-b-2 border-mineshaft-600">
+          <Tab.List className="max-w-(--breakpoint-lg) border-mineshaft-600 border-b-2">
             <Tab as={Fragment}>
               {({ selected }) => (
                 <button
                   type="button"
                   className={`p-4 ${
                     selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
-                  } w-30 font-medium outline-hidden`}
+                  } w-30 outline-hidden whitespace-nowrap font-medium`}
                 >
                   Bill monthly
                 </button>
@@ -40,7 +40,7 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
                   type="button"
                   className={`p-4 ${
                     selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
-                  } w-30 font-medium outline-hidden`}
+                  } w-30 outline-hidden font-medium`}
                 >
                   Bill yearly
                 </button>

frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx

@@ -110,9 +110,9 @@ export const PreviewSection = () => {
         subscription?.slug !== "pro" &&
         subscription?.slug !== "pro-annual" && (
           <div className="flex flex-row space-x-6">
-            <div className="mb-6 flex flex-1 items-center rounded-lg border border-primary/40 bg-primary/10 p-4">
+            <div className="border-primary/40 bg-primary/10 mb-6 flex flex-1 items-center rounded-lg border p-4">
               <div className="flex-1">
-                <h2 className="text-xl font-medium text-mineshaft-100">
+                <h2 className="text-mineshaft-100 text-xl font-medium">
                   Unleash the full power of{" "}
                   <span className="bg-linear-to-r from-primary-500 to-yellow bg-clip-text font-medium text-transparent">
                     Infisical
@@ -137,8 +137,8 @@ export const PreviewSection = () => {
                 )}
               </OrgPermissionCan>
             </div>
-            <div className="mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-              <div className="mb-4 flex w-full justify-center font-medium text-mineshaft-200">
+            <div className="border-mineshaft-600 bg-mineshaft-800 mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border p-4">
+              <div className="text-mineshaft-200 mb-4 flex w-full justify-center font-medium">
                 Want to learn more?{" "}
               </div>
               <div className="flex w-full justify-center">
@@ -147,7 +147,7 @@ export const PreviewSection = () => {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <span className="cursor-pointer rounded-full border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 duration-200 hover:border-primary/40 hover:bg-primary/10">
+                  <span className="border-mineshaft-500 bg-mineshaft-600 hover:border-primary/40 hover:bg-primary/10 cursor-pointer rounded-full border px-4 py-2 duration-200">
                     Book a demo{" "}
                     <FontAwesomeIcon
                       icon={faArrowUpRightFromSquare}
@@ -161,9 +161,9 @@ export const PreviewSection = () => {
         )}
       {!isPending && subscription && data && (
         <div className="mb-6 flex">
-          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
             <p className="mb-2 text-gray-400">Current plan</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
               {`${formatPlanSlug(subscription.slug)} ${
                 subscription.status === "trialing" ? "(Trial)" : ""
               }`}
@@ -190,17 +190,17 @@ export const PreviewSection = () => {
               </OrgPermissionCan>
             )}
           </div>
-          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
             <p className="mb-2 text-gray-400">Price</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
               {subscription.status === "trialing"
                 ? "$0.00 / month"
                 : `${formatAmount(data.amount)} / ${data.interval}`}
             </p>
           </div>
-          <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <div className="border-mineshaft-600 bg-mineshaft-900 flex-1 rounded-lg border p-4">
             <p className="mb-2 text-gray-400">Subscription renews on</p>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+            <p className="text-mineshaft-50 mb-8 text-2xl font-medium">
               {data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
             </p>
           </div>

frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/CompanyNameSection.tsx

@@ -59,9 +59,9 @@ export const CompanyNameSection = () => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
-      <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Business name</h2>
+      <h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Business name</h2>
       <div className="max-w-md">
         <Controller
           defaultValue=""

frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/InvoiceEmailSection.tsx

@@ -60,7 +60,7 @@ export const InvoiceEmailSection = () => {
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
     >
       <h2 className="mb-8 flex-1 text-xl font-medium text-white">Invoice email recipient</h2>
       <div className="max-w-md">

frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/PmtMethodsSection.tsx

@@ -24,7 +24,7 @@ export const PmtMethodsSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex items-center">
         <h2 className="flex-1 text-xl font-medium text-white">Payment methods</h2>
         <OrgPermissionCan

frontend/src/pages/organization/BillingPage/components/BillingDetailsTab/TaxIDSection.tsx

@@ -15,7 +15,7 @@ export const TaxIDSection = () => {
   ] as const);
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <div className="mb-8 flex items-center">
         <h2 className="flex-1 text-xl font-medium text-white">Tax ID</h2>
         <OrgPermissionCan

frontend/src/pages/organization/BillingPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx

@@ -2,7 +2,7 @@ import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <h2 className="flex-1 text-xl font-medium text-white">Invoices</h2>
       <InvoicesTable />
     </div>

frontend/src/pages/organization/BillingPage/components/BillingSelfHostedTab/LicensesSection.tsx

@@ -19,7 +19,7 @@ export const LicensesSection = () => {
   const { data, isPending } = useGetOrgLicenses(currentOrg?.id ?? "");
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
       <h2 className="mb-8 flex-1 text-xl font-medium text-white">Enterprise licenses</h2>
       <TableContainer className="mt-4">
         <Table>