Fix dialog close button

src-web/components/core/Dialog.tsx

@@ -74,16 +74,18 @@ export function Dialog({
             )}
             {description && <p id={descriptionId}>{description}</p>}
             <div className="h-full w-full grid grid-cols-[minmax(0,1fr)]">{children}</div>
+
             {/*Put close at the end so that it's the last thing to be tabbed to*/}
             {!hideX && (
-              <IconButton
-                onClick={onClose}
-                title="Close dialog"
-                aria-label="Close"
-                icon="x"
-                size="sm"
-                className="ml-auto absolute right-1 top-1"
-              />
+              <div className="ml-auto absolute right-1 top-1">
+                <IconButton
+                  onClick={onClose}
+                  title="Close dialog"
+                  aria-label="Close"
+                  size="sm"
+                  icon="x"
+                />
+              </div>
             )}
           </motion.div>
         </div>

src-web/components/core/IconButton.tsx

@@ -49,6 +49,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
       tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
       onClick={handleClick}
       innerClassName="flex items-center justify-center"
+      size={size}
       className={classNames(
         className,
         'relative flex-shrink-0 text-gray-700 hover:text-gray-1000',
@@ -57,7 +58,6 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
         size === 'sm' && 'w-8',
         size === 'xs' && 'w-6',
       )}
-      size={size}
       {...props}
     >
       {showBadge && (