Improve mobile header, reduce title bar padding and add conv title

This commit is contained in:
sabaimran 2024-12-10 19:03:57 -08:00
parent 321eeeaed7
commit 1ec1eff57e
3 changed files with 8 additions and 8 deletions

View file

@ -386,7 +386,7 @@ export default function Chat() {
<title> <title>
{`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`} {`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`}
</title> </title>
<div> <div className={isMobileWidth ? "h-1" : "h-auto"}>
<SidePanel <SidePanel
conversationId={conversationId} conversationId={conversationId}
uploadedFiles={[]} uploadedFiles={[]}
@ -395,9 +395,9 @@ export default function Chat() {
</div> </div>
<div className={styles.chatBox}> <div className={styles.chatBox}>
<div className={styles.chatBoxBody}> <div className={styles.chatBoxBody}>
{!isMobileWidth && conversationId && ( {conversationId && (
<div <div
className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8 pt-6 col-auto h-fit`} className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 md:pt-6 col-auto h-fit`}
> >
{title && ( {title && (
<h2 <h2
@ -409,7 +409,7 @@ export default function Chat() {
<ChatSessionActionMenu <ChatSessionActionMenu
conversationId={conversationId} conversationId={conversationId}
setTitle={setTitle} setTitle={setTitle}
sizing="md" sizing={isMobileWidth ? "sm" : "md"}
/> />
</div> </div>
)} )}

View file

@ -52,7 +52,7 @@ div.settingsMenuOptions {
grid-auto-flow: row; grid-auto-flow: row;
position: absolute; position: absolute;
background-color: var(--background-color); background-color: var(--background-color);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
top: 64px; top: 64px;
text-align: left; text-align: left;
padding: 8px; padding: 8px;
@ -69,6 +69,6 @@ div.settingsMenuOptions {
} }
div.titleBar { div.titleBar {
padding: 8px; padding: 4px;
} }
} }

View file

@ -965,7 +965,7 @@ export default function SidePanel(props: SidePanelProps) {
}} }}
> >
<DrawerTrigger> <DrawerTrigger>
<Sidebar className="h-8 w-8 mx-2" weight="thin" /> <Sidebar className="h-6 w-6 mx-2" weight="thin" />
</DrawerTrigger> </DrawerTrigger>
<DrawerContent> <DrawerContent>
<DrawerHeader> <DrawerHeader>
@ -1037,7 +1037,7 @@ export default function SidePanel(props: SidePanelProps) {
</div> </div>
)} )}
{props.isMobileWidth && ( {props.isMobileWidth && (
<Link href="/" className="content-center"> <Link href="/" className="content-center h-fit self-center">
<KhojLogoType /> <KhojLogoType />
</Link> </Link>
)} )}