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

Constrain chat messages to stay in view port across screen sizes

Browse Source 
- Constrain chat messages max width to view port across screen sizes
- Wrap references on smaller screens, use tailwind, not js to apply styling
This commit is contained in:
Debanjum Singh Solanky
2024-07-15 20:55:44 +05:30
parent 9a5bf4c701
commit 6c630bc6c3
2 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/web/app/components/chatMessage/chatMessage.module.css
View File

@@ -10,6 +10,7 @@ div.chatMessageContainer {
div.chatMessageWrapper { div.chatMessageWrapper {
padding-left: 1rem; padding-left: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
max-width: 80vw;
} }
div.chatMessageWrapper p:not(:last-child) { div.chatMessageWrapper p:not(:last-child) {
margin-bottom: 16px; margin-bottom: 16px;

8
src/interface/web/app/components/referencePanel/referencePanel.tsx
View File

@@ -283,7 +283,7 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
{numReferences} sources {numReferences} sources
</p> </p>
</h3> </h3>
<div className={`flex sm:w-[90vw] md:w-auto space-x-4 mt-2`}> <div className={`flex flex-wrap gap-2 w-auto mt-2`}>
{ {
notesDataToShow.map((note, index) => { notesDataToShow.map((note, index) => {
return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} /> return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} />
@@ -297,7 +297,6 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
{ {
shouldShowShowMoreButton && shouldShowShowMoreButton &&
<ReferencePanel <ReferencePanel
isMobileWidth={props.isMobileWidth}
notesReferenceCardData={props.notesReferenceCardData} notesReferenceCardData={props.notesReferenceCardData}
onlineReferenceCardData={props.onlineReferenceCardData} /> onlineReferenceCardData={props.onlineReferenceCardData} />
} }
@@ -310,7 +309,6 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
interface ReferencePanelDataProps { interface ReferencePanelDataProps {
notesReferenceCardData: NotesContextReferenceData[]; notesReferenceCardData: NotesContextReferenceData[];
onlineReferenceCardData: OnlineReferenceData[]; onlineReferenceCardData: OnlineReferenceData[];
isMobileWidth: boolean;
} }
export default function ReferencePanel(props: ReferencePanelDataProps) { export default function ReferencePanel(props: ReferencePanelDataProps) {
@@ -322,7 +320,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
return ( return (
<Sheet> <Sheet>
<SheetTrigger <SheetTrigger
className={`text-balance flex sm:justify-start md:justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center !m-2 inline-flex ${props.isMobileWidth ? 'w-auto' : 'w-[200px]'}`}> className='text-balance w-auto md:w-[200px] justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center !m-2 inline-flex'>
View references View references
<ArrowRight className='m-1' /> <ArrowRight className='m-1' />
</SheetTrigger> </SheetTrigger>
@@ -331,7 +329,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
<SheetTitle>References</SheetTitle> <SheetTitle>References</SheetTitle>
<SheetDescription>View all references for this response</SheetDescription> <SheetDescription>View all references for this response</SheetDescription>
</SheetHeader> </SheetHeader>
<div className="flex flex-col w-auto gap-2 mt-2"> <div className="flex flex-wrap gap-2 w-auto mt-2">
{ {
props.notesReferenceCardData.map((note, index) => { props.notesReferenceCardData.map((note, index) => {
return <NotesContextReferenceCard showFullContent={true} {...note} key={`${note.title}-${index}`} /> return <NotesContextReferenceCard showFullContent={true} {...note} key={`${note.title}-${index}`} />