From cade1f73f556d515a44c0f766a491df1f44e4874 Mon Sep 17 00:00:00 2001
From: king8fisher <140904760+king8fisher@users.noreply.github.com>
Date: Fri, 15 Nov 2024 18:22:27 -0500
Subject: [PATCH] fix layout issues

---
 src/components/atoms/SingleCivIcon/index.tsx | 2 +-
 src/components/molecules/Navbar/index.tsx    | 2 +-
 src/pages/Home/index.tsx                     | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/SingleCivIcon/index.tsx b/src/components/atoms/SingleCivIcon/index.tsx
index 0cd9180..370cad1 100644
--- a/src/components/atoms/SingleCivIcon/index.tsx
+++ b/src/components/atoms/SingleCivIcon/index.tsx
@@ -34,7 +34,7 @@ const SingleCivIcon = (
 export default SingleCivIcon;
 
 export const TooltipContent = ({ civData }: { civData: ICivData }) => {
-  return (<div className="flex flex-col gap-1">
+  return (<div className="flex flex-col gap-1 text-sm">
     <div className="flex flex-row items-start">
       <span className="font-bold leading-6 grow">{civData.value}</span>
       <SingleCivIcon
diff --git a/src/components/molecules/Navbar/index.tsx b/src/components/molecules/Navbar/index.tsx
index 3d99edc..ece628e 100644
--- a/src/components/molecules/Navbar/index.tsx
+++ b/src/components/molecules/Navbar/index.tsx
@@ -3,7 +3,7 @@ import { Patch } from "../../atoms/Navbar/Patch";
 import { DarkModeButton } from "../DarkMode";
 
 const Navbar = (): JSX.Element => (
-  <div className="py-2 bg-zinc-300 dark:bg-zinc-800">
+  <div className="py-0 bg-zinc-300 dark:bg-zinc-800">
     <Container className="flex flex-row items-center justify-between">
       <div className="flex flex-row gap-1 items-center" title={"AoE2 Card"}>
         <a
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 716047c..078f7c2 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -65,10 +65,10 @@ const Home = () => {
       <ButtonGroup filter={filter} setFilter={setFilter} filterStats={filterStats} />
       {filter === DataFilter.units && <GenericUnitsView genericUnitsData={searchResult} />}
       {filter === DataFilter.civs && searchResult?.civs.map((civ) => <CivView key={civ.key} civ={civ} />)}
-      <div className="flex flex-row flex-wrap gap-1 items-start">
+      <div className="flex flex-row flex-wrap md:flex-nowrap gap-1 items-start pb-8">
         {
           filter === DataFilter.civs &&
-          <div className="grid grid-cols-8 gap-1 p-1 mt-1 max-w-[300px]">
+          <div className="grid grid-cols-8 gap-1 p-1 mt-1 max-w-[300px] shrink-0">
             {getAllCivs().map((civData) => (
               <SingleCivIcon
                 highlight
@@ -87,7 +87,7 @@ const Home = () => {
           </div>
         }
         { (filter === DataFilter.civs && civTip) &&
-          <div className="min-w-[200px] max-w-[350px] flex flex-col gap-2 p-2 rounded bg-black/20">
+          <div className="grow flex flex-col gap-2 p-2 rounded bg-black/20">
             <TooltipContent civData={civTip} />
           </div>
         }