Reactjs – Having unecessary vertical scroll bar in my layout working with tailwind css and MUI in react JS

Here is the sample layout that working on having a scroll bar vertically

My concern is, how will I remove it ? take note that before asking questions here, I have already research regarding how to hide scroll bar and just show it when I do have many items already, unfortunately, none of those works.

This happens when I added the style flex-grow min-h-screen in my home page, but I needed to add it because my layout will look like this if I don’t add it, you will see there that the bottom bar is not at the bottom of the screen

Will provide the code below

main.tsx:

import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

app.tsx:

import { Route, Routes } from "react-router-dom";

import RootLayout from "./layouts/root/RootLayout";
import Home from "./layouts/root/Home";

import "./globals.css";

function App() {
  return (
    <main>
      <Routes>
        <Route element={<RootLayout />}>
          <Route index element={<Home />} />
        </Route>
      </Routes>
    </main>
  );
}

export default App;

Rootlayout.tsx:

import { Outlet } from "react-router-dom";
import Bottombar from "../../components/shared/Bottombar";
import Topbar from "../../components/shared/Topbar";

const RootLayout = () => {
  return (
    <>
      <div className="flex flex-col flex-1">
        <Topbar />
        <Outlet />
      </div>
      <Bottombar />
    </>
  );
};

export default RootLayout;

Topbar.tsx:

import NotificationsIcon from "@mui/icons-material/Notifications";

import { Badge } from "@mui/material";
import AccountMenu from "../../components/shared/AccountMenu";

const Topbar = () => {
  return (
    <div className="ob-bg-color">
      <div className="flex flex-1 justify-between items-center p-6">
        <AccountMenu />

        <img src="" alt="logo" />

        <Badge badgeContent={1} color="primary">
          <NotificationsIcon color="action" />
        </Badge>
      </div>
    </div>
  );
};

export default Topbar;

Home.tsx:

import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";
import { Card } from "@mui/material";

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function CustomTabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box
          sx={{
            p: 3,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "100%",
          }}
        >
          {children}
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

export default function Home() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <Card className="rounded-t-3xl bg-blu flex flex-col flex-grow min-h-screen">
      <Box sx={{ width: "100%", alignItems: "center" }}>
        <Box>
          <Tabs
            value={value}
            onChange={handleChange}
            aria-label="Wishlist tabs"
            textColor="inherit"
            centered
            TabIndicatorProps={{
              style: {
                backgroundColor: "black",
              },
            }}
          >
            <Tab
              label="Active"
              className="normal-case mr-10"
              {...a11yProps(0)}
            />
            <Tab label="History" className="normal-case" {...a11yProps(1)} />
          </Tabs>
        </Box>

        {/* Make the content area take remaining space and scroll if needed */}
        <Box className="">
          <CustomTabPanel value={value} index={0}></CustomTabPanel>
          <CustomTabPanel value={value} index={1}></CustomTabPanel>
        </Box>
      </Box>
    </Card>
  );
}

Bottombar.tsx:

import Badge from "@mui/material/Badge";
import AddIcon from "../../assets/icons/add-icon.svg";
import MyWishList from "../../assets/icons/my-wishlist-container.svg";
import FriendsIcon from "@mui/icons-material/Diversity1";
import { NavLink } from "react-router-dom";
import { useState } from "react";

const Bottombar = () => {
  const [active, setActive] = useState({
    home: true,
    addItem: false,
    friends: false,
  });

  const handleActive = (key: string) => {
    setActive((prevState) => ({
      ...prevState,
      home: key === "home",
      addItem: key === "addItem",
      friends: key === "friends",
    }));
  };

  return (
    <>
      <div className=" flex justify-between items-center w-full sticky bottom-0  bg-red-600 z-50">
        <NavLink to="/" onClick={() => handleActive("home")}>
          <div className="flex flex-col items-center  p-5">
            <img
              src={MyWishList}
              alt="my wishlist"
              className="cursor-pointer"
            />
            <p
              className={`text-[14px] leading-[140%] ${
                active.home ? "font-bold" : "font-normal"
              }`}
            >
              My Wishlist
            </p>
          </div>
        </NavLink>

        <NavLink to="/add-item" onClick={() => handleActive("addItem")}>
          <div className="flex flex-col items-center ">
            <img
              src={AddIcon}
              alt="my wishlist"
              className="relative -top-5 right-4"
            />
            <p
              className={`text-[14px]  leading-[140%] relative -top-5 right-4 ${
                active.addItem ? "font-bold" : "font-normal"
              }`}
            >
              Add Item
            </p>
          </div>
        </NavLink>

        <NavLink to="/friends" onClick={() => handleActive("friends")}>
          <div className="flex flex-col items-center p-4">
            <Badge badgeContent={3} color="error">
              <FriendsIcon color="action" />
            </Badge>
            <p
              className={`text-[14px] leading-[140%] ${
                active.friends ? "font-bold" : "font-normal"
              } `}
            >
              Friends
            </p>
          </div>
        </NavLink>
      </div>
    </>
  );
};

export default Bottombar;

globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    /* UTILITIES */
    

 .flex-center {
    @apply flex justify-center items-center;
 }

 .facebook {
    background: #415DAE;
 }

 .google { 
    background: #FFFFFF;
 }

 .google-button {
    border: 1px solid #DADADA
 }

 .ob-bg-color {
    background: #91EA9F
 }

 .headers {
    font-family: 'Nohemi', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: #193028;
 }

 .primary {
    background: #B2B4FA;
 }

 .share-button {
   background: #1930280D;
 }
}