sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats 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 {
padding-left: 1rem;
padding-bottom: 1rem;
max-width: 80vw;
}
div.chatMessageWrapper p:not(:last-child) {
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
</p>
</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) => {
return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} />
@ -297,7 +297,6 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
{
shouldShowShowMoreButton &&
<ReferencePanel
isMobileWidth={props.isMobileWidth}
notesReferenceCardData={props.notesReferenceCardData}
onlineReferenceCardData={props.onlineReferenceCardData} />
}
@ -310,7 +309,6 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
interface ReferencePanelDataProps {
notesReferenceCardData: NotesContextReferenceData[];
onlineReferenceCardData: OnlineReferenceData[];
isMobileWidth: boolean;
}
export default function ReferencePanel(props: ReferencePanelDataProps) {
@ -322,7 +320,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
return (
<Sheet>
<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
<ArrowRight className='m-1' />
</SheetTrigger>
@ -331,7 +329,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
<SheetTitle>References</SheetTitle>
<SheetDescription>View all references for this response</SheetDescription>
</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) => {
return <NotesContextReferenceCard showFullContent={true} {...note} key={`${note.title}-${index}`} />