klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-04 21:29:12 +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
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
agentColor={agentMetadata?.color}
@@ -395,7 +395,7 @@ export default function Chat() {
<div className={styles.chatBoxBody}>
{conversationId && (
<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 && (
<h2

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

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

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

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

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

@@ -367,7 +367,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
{props.isMobileWidth && (
<>
<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]">
<div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12">