Webpage truncated

[babelpainterwell]

Anybody has the issue that the chat page is truncated to be only left with the upper part of the screen?

I had this issue while coding along this tutorial and it still exists when I cloned this repo and ran it locally.

[charlie-ttt]

Yes have similar issue as well

[Ealanisln]

I'm having same issue, any advice?

[babelpainterwell]

This issue should be caused by some inappropriate use of "flex" I guess. The items in the flex container are having the same height as the highest one, that's how I get the clue. Will look deeper into this after some work on hands.

[MatthewChiang92]

im also having this issue

[MatthewChiang92]

Solved it, change according to the image uploaded in chatsidebar.tsx

[Ealanisln]

Solved it, change according to the image uploaded in chatsidebar.tsx

Awesome, it worked fine to me. Thank you @MatthewChiang92

[dealbisac]

You can use the updated code below: `"use client"; import { DrizzleChat } from "@/lib/db/schema"; import Link from "next/link"; import React from "react"; import { Button } from "./ui/button"; import { MessageCircle, PlusCircle } from "lucide-react"; import { cn } from "@/lib/utils"; import axios from "axios"; import SubscriptionButton from "./SubscriptionButton";

type Props = { chats: DrizzleChat[]; chatId: number; isPro: boolean; };

const ChatSideBar = ({ chats, chatId, isPro }: Props) => { const [loading, setLoading] = React.useState(false);

return (

New Chat

{chats.map((chat) => (

{chat.pdfName}

))}

</div>

); };

export default ChatSideBar; `