(fix/chatbots) prevent overflow

This commit is contained in:
ManishMadan2882
2025-02-21 00:41:30 +05:30
parent 0d56e62bb8
commit 88016f9c35
2 changed files with 26 additions and 13 deletions

View File

@@ -32,9 +32,9 @@ export default function ConfirmationModal({
> >
<div className="relative"> <div className="relative">
<div> <div>
<p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray"> <p className="font-base mb-1 w-[90%] text-lg break-words text-jet dark:text-bright-gray">
{message} {message}
</p> </p>
<div> <div>
<div className="mt-6 flex flex-row-reverse gap-1"> <div className="mt-6 flex flex-row-reverse gap-1">
<button <button

View File

@@ -99,17 +99,18 @@ export default function APIKeys() {
return ( return (
<div className="flex flex-col w-full mt-8 max-w-full overflow-hidden"> <div className="flex flex-col w-full mt-8 max-w-full overflow-hidden">
<div className="flex flex-col relative flex-grow"> <div className="flex flex-col relative flex-grow">
<div className="mb-6"> <div className="mb-6">
<h2 className="text-base font-medium text-sonic-silver"> <h2 className="text-base font-medium text-sonic-silver">
{t('settings.apiKeys.description')} {t('settings.apiKeys.description')}
</h2> </h2>
</div> </div>
<div className="flex justify-end mb-6"> <div className="mb-6 flex flex-col sm:flex-row justify-end items-start sm:items-center gap-3">
<button <button
onClick={() => setCreateModal(true)} onClick={() => setCreateModal(true)}
className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]" className="rounded-full w-full sm:w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
title={t('settings.apiKeys.createNew')}
> >
{t('settings.apiKeys.createNew')} {t('settings.apiKeys.createNew')}
</button> </button>
@@ -154,19 +155,31 @@ export default function APIKeys() {
</tr> </tr>
) : ( ) : (
Array.isArray(apiKeys) && Array.isArray(apiKeys) &&
apiKeys.map((element, index) => ( apiKeys.map((element) => (
<tr <tr
key={element.id} key={element.id}
className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50" className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
> >
<td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] truncate"> <td
{element.name} className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0"
>
<div className="truncate" title={element.name}>
{element.name}
</div>
</td> </td>
<td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] truncate"> <td
{element.source} className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0"
>
<div className="truncate" title={element.source}>
{element.source}
</div>
</td> </td>
<td className="py-4 px-4 text-sm font-mono text-gray-700 dark:text-[#E0E0E0] w-[25%] truncate"> <td
{element.key} className="py-4 px-4 text-sm font-mono text-gray-700 dark:text-[#E0E0E0] w-[25%]"
>
<div className="truncate" title={element.key}>
{element.key}
</div>
</td> </td>
<td className="py-4 px-4 text-right w-[5%]"> <td className="py-4 px-4 text-right w-[5%]">
<div className="flex justify-end"> <div className="flex justify-end">