klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 21:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile friendlinses across chat and home pages.

Browse Source
This commit is contained in:
sabaimran
2024-12-19 20:33:53 -08:00
parent 68af10c805
commit 9d5480d886
4 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/interface/web/app/chat/page.tsx
View File

@@ -149,7 +149,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
/> />
</div> </div>
<div <div
className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`} className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-2xl md:rounded-xl h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`}
> >
<ChatInputArea <ChatInputArea
agentColor={agentMetadata?.color} agentColor={agentMetadata?.color}
@@ -395,7 +395,7 @@ export default function Chat() {
<div className={styles.chatBoxBody}> <div className={styles.chatBoxBody}>
{conversationId && ( {conversationId && (
<div <div
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`} className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 pt-1 md:pt-6 col-auto h-fit`}
> >
{title && ( {title && (
<h2 <h2

4
src/interface/web/app/components/appSidebar/appSidebar.tsx
View File

@@ -82,14 +82,14 @@ export function AppSidebar(props: AppSidebarProps) {
}, []); }, []);
return ( return (
<Sidebar collapsible={"icon"}> <Sidebar collapsible={"icon"} variant="sidebar">
<SidebarHeader> <SidebarHeader>
<SidebarMenu className="p-0 m-0"> <SidebarMenu className="p-0 m-0">
<SidebarMenuItem className="p-0 m-0"> <SidebarMenuItem className="p-0 m-0">
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<a className="flex items-center gap-2 no-underline" href="/"> <a className="flex items-center gap-2 no-underline" href="/">
<KhojLogo className="w-14 h-auto" /> <KhojLogo className="w-14 h-auto" />
<span className="text-2xl">Khoj</span> <span className="text-lg">Khoj</span>
</a> </a>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>

4
src/interface/web/app/page.module.css
View File

@@ -93,10 +93,6 @@ div.sidePanel {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
div.inputBox {
margin-bottom: 0px;
}
div.chatBody { div.chatBody {
grid-template-columns: 0fr 1fr; grid-template-columns: 0fr 1fr;
} }

2
src/interface/web/app/page.tsx
View File

@@ -367,7 +367,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
{props.isMobileWidth && ( {props.isMobileWidth && (
<> <>
<div <div
className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-t-2xl rounded-b-none`} className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-2xl mb-2`}
> >
<ScrollArea className="w-full max-w-[85vw]"> <ScrollArea className="w-full max-w-[85vw]">
<div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12"> <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12">