layout issue
Unanswered
Abyssinian posted this in #help-forum
AbyssinianOP
okay thanks. here is a video of the issue. so because of my page.tsx the layout lags and the sidebar scrolls weridly(the button slides out idk), also the first message of the ai chat is under the header which should not be, i'm using a flex layout. <div
ref={messageListRef}
className="overflow-auto h-full"
i think it's because of the h-full
ref={messageListRef}
className="overflow-auto h-full"
i think it's because of the h-full
62 Replies
AbyssinianOP
@Anay-208 | Ping in replies
here is a video of the issue - okay thanks. here is a video of the issue. so because of my page.tsx the layout lags and the sidebar scrolls weridly(the button slides out idk), also the first message of the ai chat is under the header which should not be, i'm using a flex layout. <div
ref={messageListRef}
className="overflow-auto h-full"
i think it's because of the h-full
ref={messageListRef}
className="overflow-auto h-full"
i think it's because of the h-full
@Abyssinian here is a video of the issue - okay thanks. here is a video of the issue. so because of my page.tsx the layout lags and the sidebar scrolls weridly(the button slides out idk), also the first message of the ai chat is under the header which should not be, i'm using a flex layout. <div
ref={messageListRef}
className="overflow-auto h-full"
i think it's because of the h-full
Can you send a screenshot of overflow issue
AbyssinianOP
messages go under the header
the sidebar has a button
but it also goes under the header
@Anay-208 | Ping in replies
Can I know what behaviour are you expecting?
Because if header is there it’ll overlap only
Because if header is there it’ll overlap only
second
uh
my project is now stuck at loading
😭
uhmm
@Anay-208 | Ping in replies this is what i except.
i have two code bases, inn one it works
but the one doesn't have auto scrolling
when you send a message it should scroll down
@Anay-208 | Ping in replies Can I know what behaviour are you expecting?
Because if header is there it’ll overlap only
AbyssinianOP
wdym? i except the stuff to be under the header
but when i added auto scrolling
everything got messed up
the sidebar going into the header
ect
Asian black bear
Why do you have two threads with the same title open, which btw is also completely non-descriptive to begin with. Please don't post such low quality threads in here.
@Anay-208 | Ping in replies are you free to help me? or do i need to ask someone else?
sorry for the ping
Please don't DM people, as some people might report you
Oh now I got the issue, header is overlapping the new chat button, right?
@Anay-208 | Ping in replies Oh now I got the issue, header is overlapping the new chat button, right?
AbyssinianOP
yes, and the first message is also overlapping
@Abyssinian Click to see attachment
AbyssinianOP
but the issue is in the page.tsx as it works here
without the auto scrolling on a new message
AbyssinianOP
@Anay-208 | Ping in replies so? do i need to share my code?
you might have changed some CSS properties when implementing autoscrolling
if the header is fixed, you might need to add extra padding top on the sidebar
the header is fine
it's the page.tsx
it has werid overflows
For overflows, the header is overlapping the text because its fixed.
You need to add a padding top or margin top to fix this
You need to add a padding top or margin top to fix this
@Anay-208 | Ping in replies For overflows, the header is overlapping the text because its fixed.
You need to add a padding top or margin top to fix this
AbyssinianOP
bro i need a better layout i think
"use client"
import { useState } from "react";
import "./globals.css";
import React from "react";
import Header from "@/components/app/header";
import Sidebar from "@/components/app/sidebar";
import WelcomeModal from "@/components/popups/welcome";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const [welcome, setWelcome] = useState(true)
return (
<html lang="en" className="scroll-smooth">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<title>miniGPT</title>
<link rel="icon" href="/favicon.ico" />
</head>
<body
className="flex flex-col h-screen bg-cover bg-center bg-background bg-no-repeat overflow-hidden"
style={{ backgroundImage: "url('/background.png')" }}
>
<WelcomeModal open={welcome} onOpenChange={() => setWelcome(!welcome)} />
<Header />
<div className="flex flex-1 overflow-hidden">
<Sidebar />
<main className="flex-1 overflow-y-none">
{children}
</main>
</div>
</body>
</html>
);
}this is my layout
this is my page.tsx
AbyssinianOP
@Anay-208 | Ping in replies ?
sorry for the pings
but i'm so lost
and not sure what to do
trying to fix it for 5 hours now
@Abyssinian <@755810867878297610> ?
I mentioned that a simple fix would be to apply margin top or padding top on the sidebar and chat window
i want a good layout
You can wait for someone else to suggest a better fix.
If I were you, that is what I would do.
If I were you, that is what I would do.
bro
i hate this
it's a bad fix