diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 5738704722..e6e9fb8804 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/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'>
-            {footerSlot}
-            {
-              showExtraButton && (
-                <>
-                  <Button
-                    variant={extraButtonVariant}
-                    onClick={onExtraButtonClick}
-                    disabled={disabled}
-                  >
-                    {extraButtonText || t('common.operation.remove')}
-                  </Button>
-                  <div className='mx-3 h-4 w-[1px] bg-divider-regular'></div>
-                </>
-              )
-            }
-            <Button
-              onClick={onCancel}
-              disabled={disabled}
-            >
-              {cancelButtonText || t('common.operation.cancel')}
-            </Button>
-            <Button
-              className='ml-2'
-              variant='primary'
-              onClick={onConfirm}
-              disabled={disabled}
-            >
-              {confirmButtonText || t('common.operation.save')}
-            </Button>
+          <div className='flex justify-between p-6 pt-5'>
+            <div>
+              {footerSlot}
+            </div>
+            <div className='flex items-center'>
+              {
+                showExtraButton && (
+                  <>
+                    <Button
+                      variant={extraButtonVariant}
+                      onClick={onExtraButtonClick}
+                      disabled={disabled}
+                    >
+                      {extraButtonText || t('common.operation.remove')}
+                    </Button>
+                    <div className='mx-3 h-4 w-[1px] bg-divider-regular'></div>
+                  </>
+                )
+              }
+              <Button
+                onClick={onCancel}
+                disabled={disabled}
+              >
+                {cancelButtonText || t('common.operation.cancel')}
+              </Button>
+              <Button
+                className='ml-2'
+                variant='primary'
+                onClick={onConfirm}
+                disabled={disabled}
+              >
+                {confirmButtonText || t('common.operation.save')}
+              </Button>
+            </div>
           </div>
           {bottomSlot}
         </div>
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index e748dd4fd0..d582c660b6 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/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>
         )
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index b143c18d82..14c7ed957f 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/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>
         )}