fix(style): API info access url overflow

src/pages/llmodels/components/api-access-info.tsx

@@ -15,7 +15,7 @@ import {
   ScrollerModal
 } from '@gpustack/core-ui';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button, Tag } from 'antd';
+import { Button, Flex, Tag } from 'antd';
 import _ from 'lodash';
 import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
@@ -79,6 +79,7 @@ const Tips = styled.div`
 const APITAG = styled(Tag)`
   border-radius: 12px;
   margin: 0;
+  width: fit-content;
   margin-left: 8px;
 `;
 
@@ -149,7 +150,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
           {intl.formatMessage({ id: 'models.table.button.apiAccessInfo' })}
         </span>
       }
-      width={600}
+      width={660}
       destroyOnHidden
       closable={true}
       mask={{
@@ -164,10 +165,15 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
         <span className="label">
           {intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })}
         </span>
-        <span className="value">
+        <Flex align="center" wrap>
-          <AutoTooltip ghost maxWidth={data.generic_proxy ? 400 : 240}>
+          <span
+            className="value"
+            style={{ display: 'flex', flex: 1, minWidth: 0 }}
+          >
+            <AutoTooltip ghost maxWidth={'100%'}>
               {endPoint}
             </AutoTooltip>
+          </span>
           {!data.generic_proxy && (
             <>
               <APITAG color="geekblue">
@@ -188,7 +194,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
               )}
             </>
           )}
-        </span>
+        </Flex>
         <span className="copy-btn">
           <CopyButton text={endPoint} type="link" size="small"></CopyButton>
         </span>
@@ -197,17 +203,20 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
             id: 'models.table.apiAccessInfo.modelName'
           })}
         </span>
+        <Flex align="center">
           <span className="value">
             <AutoTooltip ghost maxWidth={300}>
               {data.name}
             </AutoTooltip>
           </span>
+        </Flex>
         <span className="copy-btn">
           <CopyButton text={data.name} type="link" size="small"></CopyButton>
         </span>
         <span className="label">
           {intl.formatMessage({ id: 'models.table.apiAccessInfo.apikey' })}
         </span>
+        <Flex align="center">
           <span className="value">
             <CreateButton
               type="link"
@@ -223,6 +232,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
               ></IconFont>
             </CreateButton>
           </span>
+        </Flex>
       </ApiAccessInfoWrapper>
       {data.generic_proxy && (
         <div style={{ marginTop: 12 }}>{GenericProxyCommandCode}</div>