Merge branch 'main' of https://github.com/jambonz/chrome-extension-dialer

src/components/animate/index.tsx

@@ -5,7 +5,7 @@ function AnimateOnShow({
   children,
   initial = -20,
   exit = -20,
-  duration = 0.3,
+  duration = 0.5,
 }: {
   children: ReactNode;
   initial?: number;
@@ -14,10 +14,11 @@ function AnimateOnShow({
 }) {
   return (
     <motion.div
-      initial={{ opacity: 0, y: initial }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: exit }}
+      initial={{ opacity: 0, y: initial, height: 0 }}
+      animate={{ opacity: 1, y: 0, height: "auto" }}
+      exit={{ opacity: 0, y: exit, height: 0 }}
       transition={{ duration: duration }}
+      style={{ width: "100%" }}
     >
       {children}
     </motion.div>

src/window/settings/accountForm.tsx

@@ -23,6 +23,7 @@ import { getAdvancedValidation } from "src/api";
 import Switch from "src/imgs/icons/Switch.svg";
 import Trash from "src/imgs/icons/Trash.svg";
 import invalid from "src/imgs/icons/invalid.svg";
+import AnimateOnShow from "src/components/animate";
 
 function AccountForm({
   closeForm,
@@ -217,6 +218,7 @@ function AccountForm({
             />
           </FormControl>
           {showAdvanced && (
+            <AnimateOnShow>
               <VStack w={"full"} bg={"gray.50"} borderRadius={"2xl"} p={"3.5"}>
                 <FormControl id={`jambonz_api_server${inputUniqueId}`}>
                   <FormLabel>Jambonz API Server Base URL</FormLabel>
@@ -281,6 +283,7 @@ function AccountForm({
                   </HStack>
                 )}
               </VStack>
+            </AnimateOnShow>
           )}
           <Center flexDirection={"column"} gap={"2.5"}>
             <Button