Fix tooltip group and page side padding

toriis-portal · Jan 31, 2024 · b404d35 · b404d35
1 parent 0336a17
commit b404d35
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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,
       )}
     >