improve: improve mobile layout for API keys settings and dialog (#24114)

packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx

@@ -157,7 +157,7 @@ export default function ApiKeyDialogForm({
               {defaultValues ? t("edit_api_key") : t("create_api_key")}
             </h2>
             {IS_CALCOM ? (
-              <div className="mt-4 block gap-2 sm:flex">
+              <div className="mt-4 flex flex-col gap-2 sm:flex-row">
                 <div className="border-emphasis relative flex w-full items-start rounded-[10px] border p-4 text-sm">
                   {t("api_key_modal_subtitle")}
                 </div>
@@ -178,7 +178,7 @@ export default function ApiKeyDialogForm({
             <Controller
               name="note"
               control={form.control}
-              render={({ field: { onChange, value } }) => (
+              render={({ field: { value } }) => (
                 <TextField
                   name="note"
                   label={t("personal_note")}
@@ -211,7 +211,7 @@ export default function ApiKeyDialogForm({
               </div>
               <Controller
                 name="expiresAt"
-                render={({ field: { onChange, value } }) => {
+                render={({ field: { onChange } }) => {
                   const defaultValue = expiresAtOptions[1];
 
                   return (

packages/features/settings/appDir/SettingsHeader.tsx

@@ -26,12 +26,12 @@ export default function Header({
     <div>
       <header
         className={classNames(
-          "border-subtle mx-auto block justify-between sm:flex",
+          "border-subtle mx-auto flex justify-between",
           borderInShellHeader && "rounded-t-lg border px-4 py-6 sm:px-6",
           borderInShellHeader === undefined && "mb-8 border-b pb-8"
         )}>
-        <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
-          <div className="flex w-full items-center">
+        <div className="flex w-full items-center justify-between gap-2">
+          <div className="flex items-center">
             {backButton && (
               <a href="javascript:history.back()">
                 <Icon name="arrow-left" className="mr-7" />
@@ -52,7 +52,7 @@ export default function Header({
               )}
             </div>
           </div>
-          <div className={classNames("flex-shrink-0 sm:ms-auto", ctaClassName)}>{CTA}</div>
+          <div className={classNames("flex-shrink-0", ctaClassName)}>{CTA}</div>
         </div>
       </header>
       <Suspense fallback={<Icon name="loader" className="mx-auto my-5 animate-spin" />}>{children}</Suspense>