fix

web/app/components/base/modal/modal.tsx

@@ -82,36 +82,40 @@ const Modal = ({
               <div className='px-6 py-3'>{children}</div>
             )
           }
-          <div className='flex items-center justify-end p-6 pt-5'>
+          <div className='flex justify-between p-6 pt-5'>
-            {footerSlot}
+            <div>
-            {
+              {footerSlot}
-              showExtraButton && (
+            </div>
-                <>
+            <div className='flex items-center'>
-                  <Button
+              {
-                    variant={extraButtonVariant}
+                showExtraButton && (
-                    onClick={onExtraButtonClick}
+                  <>
-                    disabled={disabled}
+                    <Button
-                  >
+                      variant={extraButtonVariant}
-                    {extraButtonText || t('common.operation.remove')}
+                      onClick={onExtraButtonClick}
-                  </Button>
+                      disabled={disabled}
-                  <div className='mx-3 h-4 w-[1px] bg-divider-regular'></div>
+                    >
-                </>
+                      {extraButtonText || t('common.operation.remove')}
-              )
+                    </Button>
-            }
+                    <div className='mx-3 h-4 w-[1px] bg-divider-regular'></div>
-            <Button
+                  </>
-              onClick={onCancel}
+                )
-              disabled={disabled}
+              }
-            >
+              <Button
-              {cancelButtonText || t('common.operation.cancel')}
+                onClick={onCancel}
-            </Button>
+                disabled={disabled}
-            <Button
+              >
-              className='ml-2'
+                {cancelButtonText || t('common.operation.cancel')}
-              variant='primary'
+              </Button>
-              onClick={onConfirm}
+              <Button
-              disabled={disabled}
+                className='ml-2'
-            >
+                variant='primary'
-              {confirmButtonText || t('common.operation.save')}
+                onClick={onConfirm}
-            </Button>
+                disabled={disabled}
+              >
+                {confirmButtonText || t('common.operation.save')}
+              </Button>
+            </div>
           </div>
           {bottomSlot}
         </div>

web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx

@@ -127,11 +127,13 @@ const ApiKeyModal = ({
       footerSlot={
         helpField && (
           <a
-            className='system-xs-regular flex h-8 grow items-center text-text-accent'
+            className='system-xs-regular mr-2 flex items-center py-2 text-text-accent'
             href={helpField?.url}
             target='_blank'
           >
-            {renderI18nObject(helpField?.help as any)}
+            <span className='break-all'>
+              {renderI18nObject(helpField?.help as any)}
+            </span>
             <RiExternalLinkLine className='ml-1 h-3 w-3' />
           </a>
         )

web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx

@@ -170,11 +170,13 @@ const OAuthClientSettings = ({
         {
           helpField && __oauth_client__ === 'custom' && (
           <a
-            className='system-xs-regular mt-4 flex h-4 items-center text-text-accent'
+            className='system-xs-regular mt-4 flex items-center text-text-accent'
             href={helpField?.url}
             target='_blank'
           >
-            {renderI18nObject(helpField?.help as any)}
+            <span className='break-all'>
+              {renderI18nObject(helpField?.help as any)}
+            </span>
             <RiExternalLinkLine className='ml-1 h-3 w-3' />
           </a>
         )}