klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-07 05:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve responsive behavior of settings cards

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-07-25 20:47:34 +05:30
parent efcad4996d
commit 51e83bcc26
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/interface/web/app/settings/page.tsx
View File

@@ -182,7 +182,7 @@ export default function SettingsView() {
const [otp, setOTP] = useState(""); const [otp, setOTP] = useState("");
const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>(PhoneNumberValidationState.Verified); const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>(PhoneNumberValidationState.Verified);
const { toast } = useToast(); const { toast } = useToast();
const cardClassName = "w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg"; const cardClassName = "w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg";
useEffect(() => { useEffect(() => {
setUserConfig(initialUserConfig); setUserConfig(initialUserConfig);
@@ -321,7 +321,7 @@ export default function SettingsView() {
<NavMenu selected="Settings" title="Settings" showLogo={true} /> <NavMenu selected="Settings" title="Settings" showLogo={true} />
<div className={styles.contentBody}> <div className={styles.contentBody}>
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
<div id="content" className="grid grid-flow-column gap-16 m-8"> <div id="content" className="grid grid-flow-column sm:grid-flow-row gap-16 m-8">
<div className="section grid gap-8"> <div className="section grid gap-8">
<div className="text-4xl">Profile</div> <div className="text-4xl">Profile</div>
<div className="cards flex flex-wrap gap-16"> <div className="cards flex flex-wrap gap-16">
@@ -428,7 +428,7 @@ export default function SettingsView() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Name</TableHead> <TableHead className="pl-0">Name</TableHead>
<TableHead>Token</TableHead> <TableHead>Token</TableHead>
<TableHead>Actions</TableHead> <TableHead>Actions</TableHead>
</TableRow> </TableRow>
@@ -436,13 +436,13 @@ export default function SettingsView() {
<TableBody> <TableBody>
{apiKeys.map((key) => ( {apiKeys.map((key) => (
<TableRow key={key.token}> <TableRow key={key.token}>
<TableCell><b>{key.name}</b></TableCell> <TableCell className="pl-0"><b>{key.name}</b></TableCell>
<TableCell>{`${key.token.slice(0, 4)}...${key.token.slice(-4)}`}</TableCell> <TableCell>{`${key.token.slice(0, 4)}...${key.token.slice(-4)}`}</TableCell>
<TableCell> <TableCell>
<Button variant="outline" className="border border-green-400" onClick={() => copyAPIKey(key.token)}> <Button variant="outline" className="border border-green-400" onClick={() => copyAPIKey(key.token)}>
<Copy className="h-4 w-4 mr-2" /><span className="hidden md:inline">Copy</span> <Copy className="h-4 w-4 mr-2" /><span className="hidden md:inline">Copy</span>
</Button> </Button>
<Button variant="outline" className="ml-4 border border-red-400" onClick={() => deleteAPIKey(key.token)}> <Button variant="outline" className="md:ml-4 border border-red-400" onClick={() => deleteAPIKey(key.token)}>
<Trash className='h-4 w-4 mr-2' /><span className="hidden md:inline">Delete</span> <Trash className='h-4 w-4 mr-2' /><span className="hidden md:inline">Delete</span>
</Button> </Button>
</TableCell> </TableCell>