From b404d35fc76d75f92fb4779f0f042a7673054016 Mon Sep 17 00:00:00 2001
From: Liza George <liza@chiramattel.com>
Date: Tue, 30 Jan 2024 20:25:36 -0600
Subject: [PATCH] Fix tooltip group and page side padding

---
 src/pages/company/[id].tsx            | 2 +-
 src/sections/company/TooltipGroup.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/company/[id].tsx b/src/pages/company/[id].tsx
index 493cd304..fd44bcea 100644
--- a/src/pages/company/[id].tsx
+++ b/src/pages/company/[id].tsx
@@ -190,7 +190,7 @@ const Company: FC<CompanyDetailsProps> = ({
       <div className="ml-8 mt-6">
         <BackButton link="/investments" />
       </div>
-      <div className="mb-20 flex flex-col flex-wrap px-12 lg:px-24">
+      <div className="mb-20 flex flex-col flex-wrap px-8 md:px-12 lg:px-24">
         <div className="flex flex-col items-center ">
           <HighlightedTitle
             title={company.name}
diff --git a/src/sections/company/TooltipGroup.tsx b/src/sections/company/TooltipGroup.tsx
index 8148b6b7..015c92f0 100644
--- a/src/sections/company/TooltipGroup.tsx
+++ b/src/sections/company/TooltipGroup.tsx
@@ -8,8 +8,10 @@ import { Tag, ToolTip } from '../../components'
 import { envGradeToColor, assetAmountToString } from '../../utils/helpers'
 import type { SectorEntry, IndustryEntry } from '../../types'
 
-const tagGroupStyle = clsx('items-center flex-col lg:inline-flex lg:flex-row')
-const noteStyle = clsx('lg:px-2 truncate my-1')
+const tagGroupStyle = clsx(
+  'w-full flex space-x-2 flex-row md:flex-col md:w-fit md:items-center lg:inline-flex lg:flex-row md:space-x-0',
+)
+const noteStyle = clsx('lg:px-2 truncate my-1 w-fit')
 const tagStyle = clsx('bg-cobalt text-white')
 
 interface CompanyTooltipGroupProps {
@@ -30,7 +32,7 @@ const CompanyTooltipGroup: FC<CompanyTooltipGroupProps> = ({
   return (
     <div
       className={clsx(
-        'flex max-w-full flex-wrap items-center justify-between gap-y-2 px-8 md:gap-y-4',
+        'flex max-w-full flex-col flex-wrap items-center justify-between gap-y-4 md:flex-row md:px-8',
         className,
       )}
     >