5 replies

Responsive component with overflow scroll (Tailwind)

Hello everyone!
I wanted an element which takes the entire space available but it should not overflow and increase the page height. I am unable to think of a solution without giving it a specific height which defeats the purpose of it being responsive.

Somehow this code worked but I dont know how (Check images, the highlighted part is the "ChatDialogs" component in question)

If there is a better way to do it please let me know.
Here is the code if you want to check it out : https://github.com/Hiperultimate/groupy/blob/chat-page-FE/src/components/ChatComponent/ChatArea.tsx

import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
  const chatData = useRecoilValue(chatOptionState);

  const activeChat: TChatOption | undefined = chatData.find((chat) => {
    return chat.isSelected === true;
  });

  if (!activeChat) {
    return <></>;
  }

  return (
    <div className="flex h-full flex-col ">
      <div className="h-24 border-b border-light-grey">
        <ChatHeader
          authorName={activeChat.chatName}
          authorAtTag={activeChat.chatUserTag}
          authorProfilePicture={activeChat.chatImg}
        />
      </div>
      <div className="flex-grow overflow-y-auto h-2">
        <ChatDialogs chatId={activeChat.id} />
      </div>
      <div className="h-20">
        <ChatTextInput />
      </div>
    </div>
  );
};

import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
  const chatData = useRecoilValue(chatOptionState);

  const activeChat: TChatOption | undefined = chatData.find((chat) => {
    return chat.isSelected === true;
  });

  if (!activeChat) {
    return <></>;
  }

  return (
    <div className="flex h-full flex-col ">
      <div className="h-24 border-b border-light-grey">
        <ChatHeader
          authorName={activeChat.chatName}
          authorAtTag={activeChat.chatUserTag}
          authorProfilePicture={activeChat.chatImg}
        />
      </div>
      <div className="flex-grow overflow-y-auto h-2">
        <ChatDialogs chatId={activeChat.id} />
      </div>
      <div className="h-20">
        <ChatTextInput />
      </div>
    </div>
  );
};

import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
  const chatData = useRecoilValue(chatOptionState);

  const activeChat: TChatOption | undefined = chatData.find((chat) => {
    return chat.isSelected === true;
  });

  if (!activeChat) {
    return <></>;
  }

  return (
    <div className="flex h-full flex-col ">
      <div className="h-24 border-b border-light-grey">
        <ChatHeader
          authorName={activeChat.chatName}
          authorAtTag={activeChat.chatUserTag}
          authorProfilePicture={activeChat.chatImg}
        />
      </div>
      <div className="flex-grow overflow-y-auto h-2">
        <ChatDialogs chatId={activeChat.id} />
      </div>
      <div className="h-20">
        <ChatTextInput />
      </div>
    </div>
  );
};

import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
  const chatData = useRecoilValue(chatOptionState);

  const activeChat: TChatOption | undefined = chatData.find((chat) => {
    return chat.isSelected === true;
  });

  if (!activeChat) {
    return <></>;
  }

  return (
    <div className="flex h-full flex-col ">
      <div className="h-24 border-b border-light-grey">
        <ChatHeader
          authorName={activeChat.chatName}
          authorAtTag={activeChat.chatUserTag}
          authorProfilePicture={activeChat.chatImg}
        />
      </div>
      <div className="flex-grow overflow-y-auto h-2">
        <ChatDialogs chatId={activeChat.id} />
      </div>
      <div className="h-20">
        <ChatTextInput />
      </div>
    </div>
  );
};

Edit:
Let me know if there is anything you need from my side or if my query is not detailed enough. I have tried looking it up on the web but failed.

GitHub

groupy/src/components/ChatComponent/ChatArea.tsx at chat-page-FE · ...

A social networking platform made using tRPC, TypeScript, Tailwind, Next, Prisma - Hiperultimate/groupy

Responsive component with overflow scroll (Tailwind)

Similar Threads

Similar Threads

Similar Threads