fix layout issues

king8fisher · Nov 15, 2024 · cade1f7 · cade1f7
1 parent 35d15c4
commit cade1f7
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>
         }