Use new nav menu alignment in the settings page

This commit is contained in:
sabaimran 2024-08-02 19:44:30 +05:30
parent e6014e89bf
commit d48a789442
3 changed files with 24 additions and 4 deletions

View file

@ -222,7 +222,7 @@ export default function Search() {
<div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8"> <div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8">
<div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'> <div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
<div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'> <div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
<MagnifyingGlass className='inline m-2' /> <MagnifyingGlass className='inline m-2 h-4 w-4' />
<Input <Input
autoFocus autoFocus
className='border-none' className='border-none'

View file

@ -643,7 +643,7 @@ export default function SettingsView() {
if (!userConfig) return <Loading />; if (!userConfig) return <Loading />;
return ( return (
<div id="page" className={styles.page}> <div className={styles.page}>
<title> <title>
{title} {title}
</title> </title>
@ -655,7 +655,7 @@ export default function SettingsView() {
/> />
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.contentBody}> <div className={`${styles.contentBody} mx-10 my-2`}>
<Suspense fallback={<Loading />}> <Suspense fallback={<Loading />}>
<div id="content" className="grid grid-flow-column sm:grid-flow-row 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">

View file

@ -1,6 +1,6 @@
div.page { div.page {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: 1fr;
gap: 1rem; gap: 1rem;
height: 100vh; height: 100vh;
color: hsla(var(--foreground)); color: hsla(var(--foreground));
@ -8,15 +8,35 @@ div.page {
div.contentBody { div.contentBody {
display: grid; display: grid;
margin: auto; margin: auto;
margin-left: 20vw;
margin-top: 1rem;
} }
div.phoneInput { div.phoneInput {
padding: 0rem; padding: 0rem;
} }
div.sidePanel {
position: fixed;
height: 100%;
}
div.phoneInput input { div.phoneInput input {
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid hsla(var(--border)); border: 1px solid hsla(var(--border));
border-radius: 0.25rem; border-radius: 0.25rem;
} }
@media screen and (max-width: 768px) {
div.sidePanel {
position: relative;
height: 100%;
}
div.contentBody {
margin-left: 0;
margin-top: 0;
}
}